个人中心
gpt4 book ai didi

HTML 和 CSS 背景定位一个图标

转载 作者：行者123 更新时间：2023-11-28 10:56:56 32 4
gpt4 key购买 nike

我正在我的网站上工作，问题是我想设置一个纯粹由 css 制作的图标作为 te div“pagewrap”的背景，我似乎不知道自己做，所以我想你帮我解决这个问题。我将发布链接以获得更清晰的 View :http://i60.tinypic.com/312bc0p.png

这是 HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="css/media-queries.css" rel="stylesheet" type="text/css">

<title>Insert title here</title>
</head>
<body>
<!-- ### Page Wrap ### -->
<div id="pagewrap"> 

        <!-- ### Logo Bar ### -->
        <div id="logoBar">  
            <div class="helper">        
                <div class="logo"></div>
            </div>
        </div>

        <div style="clear:both;"></div>  
        <!-- ### Home Icon ### -->
        <div class="icon">
        <div class="home"></div>
        <div class="chimney"></div>
        </div>

        <!-- ### Side Bar ### -->
        <div id="sidebar">
            <div class="widget">
                <ul> 
                  <li style="border-top:0 !important;"><a href="">Acceuil</a></li> 
                  <li><a href="">Identification</a></li> 
                  <li><a href="">Mon Parcours</a></li> 
                  <li><a href="">Ma Formation</a></li> 
                  <li><a href="">Mes Projets</a></li> 
                  <li><a href="">Dossier de Veille</a></li> 
                  <li><a href="">Contact Me</a></li> 
                </ul>   
            </div>                  
        </div>

        <!-- ### Content ### -->
        <div class="contenu">
            <div class="post clearfix">                     
                    <h1 class="post-title"><a href="#">Acceuil</a></h1>                         
                <br/><p>Ici vous trouverez toutes les informations conçernant moi, mes études, mes projets et ma formation.</p>         
        </div>
</div>      
</div>          
</body>
</html>

这是CSS:

/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
    width: 1000px;
    margin: 0 auto;
    background:#3c3c3c;
    height:100vh;
    min-height:610px;

    /*SHADOW*/
    -webkit-box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
    -moz-box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
    box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
}

/* Home */
div.icon div.home {
    height: 0px;
    width: 0px;
    border-width: 16px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
    position: absolute;
    bottom: 16px;
    left: 0;
}

div.icon div.home:after {
    content: '';
    width: 5px;
    height: 16px;
    background-color: transparent;
    position: absolute;
    top: 16px;
    right: -11px;
    border-left: 8px solid #333;
    border-right: 8px solid #333;
}

div.icon div.home:before {
    content: '';
    width: 9px;
    height: 6px;
    background-color: #333;
    position: absolute;
    top: 16px;
    right: -5px;
}

div.icon div.chimney {
    width: 4px;
    height: 10px;
    background: #333;
    position: absolute;
    right: 6px;
    top: 3px;
}


/************************************************************************************
MENU
*************************************************************************************/



/**Side Bar**/
#sidebar {
    width: 250px;
    margin: 10px 30px 0 24px;
}
.widget {
    background: #f5f5f5;
    margin: 0 0 30px;
    padding: 10px 20px;
    /* rounded corner */
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    /* box shadow */
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.widget ul {
    margin: 0;
    padding: 0;
}
.widget li {
    margin: 0;
    padding: 12px 0;
    list-style: none;
    clear: both;    
    border-top: solid 1px black;
}
.widget ul li a{
    font-family:stainy;
    font-size:21pt;
    color:#303438;
}
.widget ul li a:hover{
    text-decoration: none;
    outline: none;
    color:#30c9e0;
    font-size:22pt;
}
.widgettitle{
    font-family:stainy;
    font-size:20pt;

}

最佳答案

困难的部分是什么？只需为您的 #pagewrap 添加 background-image 并调整定位和重复就足够了。

#pagewrap {
  background-image: url('YOUR_ICON');
  ...
}

另请查看此文档:https://developer.mozilla.org/en-US/docs/Web/CSS/background

关于HTML 和 CSS 背景定位一个图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22582459/

32 4 0
文章推荐： css - onKeyUp onKeyDown 通过元素 AngularJS 在 div 内部移动
文章推荐： JavaScript Cookie 访问计数、上次登录日期
文章推荐： javascript - jquery对象实际上只是初始化构造函数 'enhanced'
文章推荐： html - 响应式调整大小
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com