[英]HTML ad CSS background positioning an icon
I am working on my website, the thing is that I want to set an icon made purely by css as the background of te div "pagewrap", I can't seem to know to do it by myself so I would like you to help me out with this. 我正在我的网站上工作,问题是我想将纯css制作的图标设置为te div“ pagewrap”的背景,我似乎不知道自己一个人做,所以希望您能提供帮助我出去了 I will post the link for a clearer view : http://i60.tinypic.com/312bc0p.png
我将发布该链接以获得更清晰的视图: http : //i60.tinypic.com/312bc0p.png
Here's the HTML: 这是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>
Here's the css: 这是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;
}
What's the hard part? 难点是什么? just add
background-image
for your #pagewrap
and tweek the positioning and repeating should be enough. 只需为
#pagewrap
添加background-image
,然后tweek的定位和重复就足够了。
#pagewrap {
background-image: url('YOUR_ICON');
...
}
Also check this document: https://developer.mozilla.org/en-US/docs/Web/CSS/background 还要检查此文档: https : //developer.mozilla.org/en-US/docs/Web/CSS/background
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.