一、什么是css的精灵图?
是一种图像的合成技术,说白了,就是在一张集成了好多张图片的大图片上根据background-position显示要显示的图片
二、引入精灵图的原因:
具体是因为,网页上面的每张图片都要经历一次请求才能展示给用户,小的图标频繁的请求服务器,降低页面的加载速度,为 了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,因此,产生了css精灵技术。
三、使用方法:
以此图片为例:
HTML代码:
<ul>
<li class=" big shopcar"></li>
<li>购物车</li>
<li class=" big helpcenter"></li>
<li>帮助中心 </li>
<li class="big joincollect"></li>
<li>加入收藏</li>
<li class="big home"></li>
<li>设为首页</li>
<li class="login">登录 </li>
<li class="register">注册 </li>
</ul>
以你用的图片的左上为原点测量你想截取的图片的左上角的坐标(单位是毫秒)测量工具:picpick
CSS代码:
ul li {
list-style: none;
display: inline-block;
}
.big {
width: 25px;
height: 24px;
background-image: url('images/icon.gif');
}
.shopcar {
background-position: 0px 0px;
}
.helpcenter {
background-position: -46px 0px;
}
.joincollect {
background-position: -90px 0px;
}
.home {
background-position: -127px 0px;
}