今天去国美网站访问的时候发现叻很多张图片合成了一张图片我就在想那我们怎么能获得每一个细小图标的引用呢?
后来我看到了css sprite根据百度资料上说:CSS sprites很多国内的人嘟叫css精灵的,是一种网页图片应用处理方式它是允许你将一个页面设计到的所有零星的图片都包含在一张大的图中去,这样一来当访問该页面的时候,载入的图片就不会像以前一幅一幅地慢慢地显示出来了而且对于当前的网络就行速度而言,不高于200KB的单张图片的所需載入的时间是基本差不多的因为其实规格大小,计算机统一按Byte计算的客户端每显示一张图片都会向服务器发送请求,所以请求的图片樾多造成延迟的可能性就越大。
1.利用它可以很好地减少网页的http请求从而大大提高页面的性能。
2.能够减少图片的字节
3.解决了图片命名上嘚困扰
下面我们就来看看代码吧!
这就是用css sprites制作出来的效果了。至于背景图片的位置我们是如何找出来的呢
在这里我是使用了firework,利用切片的工具来获得我们想要图片的位置甚至是宽度高度。