CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生。这个被国内开发者昵称为CSS精灵、CSS雪碧的家伙到底解决了什么问题,我们又怎样合理使用这个技术呢?下面让我们详细的聊聊。
CSS Sprites技术的其中一个好处是图片的加载时间(在有许多CSS Sprites时,单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF 只有相关的一个色表,而单独分割的每一张 GIF 都有自己的一个色表,这就增加了总体的大小。因此,单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。技术的其中一个好处是图片的加载时间(在有许多 sprite 时,单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF 只有相关的一个色表,而单独分割的每一张 GIF 都有自己的一个色表,这就增加了总体的大小。因此,单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。
把所有背景图都集成在一张图片上,减少图片服务器请求次数
好象现在越来越流行这种玩法了,原来大家都是把背景切成单个小图片,要用背景的时候一个个定义,这样页面打开的时候,也会加载各个小图片,但是这种办法把 所有小图片都集中在一张图中,定义背景时用坐标定位,再结合高度,宽度限制等手段,过到相同的效果,好处是:虽然下载的总K数不会有明显变化,但是图片的请求次数却明显减少了。
简单介绍一下CSS Sprites 的优点
当用户往U盘中拷200张图片,会等很久。但是如果弄成一个文件,再拷贝就会快很多。
CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度。
实现方法
首先将小图片整合到一张大的图片上
然后根据具体图标在大图上的位置,给背景定位。background-position:-8px -95px;【from】
再看一段代码:
废话不说,直接看代码吧:
<style type="text/css"> .bg1{background:url(bg_v.png) no-repeat 0 0;padding-left:20px;} .bg2{background:url(bg_v.png) no-repeat 0 -20px;padding-left:20px;} .bg3{background:url(bg_v.png) no-repeat 0 -40px;padding-left:20px;} .bg4{background:url(bg_v.png) no-repeat 0 -60px;padding-left:20px;} .bg5{background:url(bg_v.png) no-repeat 0 -80px;padding-left:20px;} </style> <a href="#" class="bg1">bg1</a> <a href="#" class="bg2">bg2</a> <a href="#" class="bg3">bg3</a> <a href="#" class="bg4">bg4</a> <a href="#" class="bg5">bg5</a> <img src="bg_v.png" />
效果图: