档案
日志
相册
视频
分享
2008-07-07 | css中颜色和图像的设置
8. 颜色的一些属性设置
/* 关于颜色的一些属性设置
----------------------------------------------*/
p{
color:#000;
line-height:150%;
background-color:#ff0;
}
/* Hightlight class to pick out key words or phrases
------------------------------------------------------------*/
.hightlight{
background-color:#f11;
}
<span>主要用来控制段落的一部分，而不是整块段落。
<p> Finally, there is an introduction <span class="hightlight">About some additional
</span>material on improving query performance.
</p>
9.为标题添加背景色
h2{
color:#000;
background-color:#808080;
padding:0.3em;
}
注意padding的效果！
10.将内容放在亮一点的背景中
/*Container for all page content
------------------------------------------------------*/
#container{
padding:10px;
border:1px solid #000;
background-color:#fff;
}
<div id="container">
<h2>I love you ad</h2>
<p> Finally, there is an introduction About some additional material on improving query performance.
</p>
</div>
11.设定背景图像
body{
margin:10px;
background-color:#ccc;
}
#container{
height:200px;
border:1px solid #000;
background-color:#fff;
background-image:url(title.gif);
}
<body>
<div id="container">
</div>
</body>
12.关于图像的平铺
#container{
height:200px;
border:1px solid #000;
background-color:#fff;
background-image:url(title.gif);
/* background属性有4个可能值——repeat，repeat-x，repeat-y，no-repeat */
background-repeat:no-repeat;
}
13.图像的定位
#container{
height:200px;
border:1px solid #000;
background-color:#fff;
background-image:url(title.gif);
background-repeat:no-repeat;
/*background-position的属性可能值除了具体的像素值和百分比以外，还有{top，center，bottom}*{left，right，center} */
background-position:50px 50px;
}
分享
评论
想第一时间抢沙发么？