CSS sprites是什么?
CSS Sprites是一种网页图片应用处理方式,就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位。
优点
- 减少网页的http请求,提高性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
- 减少图片的字节:多张图片合并成1张图片的字节小于多张图片的字节总和;
- 减少了命名困扰:只需对一张集合的图片命名,不需要对每一个小元素进行命名提高制作效率;
- 更换风格方便:只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变,维护起来更加方便。
缺点
- 图片合成比较麻烦;
- 背景设置时,需要得到每一个背景单元的精确位置,;
- 维护合成图片时,最好只是往下加图片,而不要更改已有图片。
实现方式
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/htm"; charset="utf-8" />
<title>CSS Sprites</title>
<style type="text/css">
*{margin: 0px; padding: 0px;}
#mainbody{
position: relative;
width: 100px;
height: 150px;
border: solid 2px #fff;
padding: 2px;
}
ul{list-style: none;}
li{
display: block;
height: 25px;
line-height: 25px;
overflow: hidden;
margin: 5px;
border-bottom: 3px solid #dedede
}
h3{
font-weight: 100;
font-size: 14px;
text-indent: 10px;
}
li i{
background: url(00.png) no-repeat;
display: inline;
width: 25px;
height: 25px;
float: left;
}
.sp-1 i{background-position: 0px 0px;}
.sp-2 i{background-position: -26px 0px;}
.sp-3 i{background-position: -26px -27px;}
.sp-4 i{background-position: 0px -27px;}
</style>
</head>
<body>
<div id="mainbody">
<ul>
<li class="sp-1">
<i></i>
<h3>主页</h3>
</li>
<li class="sp-2">
<i></i>
<h3>空间</h3>
</li>
<li class="sp-3">
<i></i>
<h3>网络</h3>
</li>
<li class="sp-4">
<i></i>
<h3>其他</h3>
</li>
</ul>
</div>
</body>
</html>
CSS中规定图片的左上方为原点(0px 0px),向左为水平正方向,向上为竖直正方向,而且在写坐标时应特别注意不要忘记单位px