主机格调

刚开始认真学习CSS的时候,发现一个CSS Sprites教程。后来群里的朋友问起这个问题,我很想把那个教程发给他看看,但是已经找不到了,所以就一直想自己写个CSS Sprites教程。这几天写网页的时候恰巧用到了CSS Sprites,就写出来,分享给各位刚学习CSS的新手,相信你看懂了这个,理解和使用CSS Sprites就不成问题了。

首先解释下CSS Sprites是什么:国内有称CSS精灵,有称CSS雪碧的,不管叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每个图片的坐标,从而达到提升网站加载速度,对开发前段的朋友是必备技能。更详细的解释请点【百度百科】围观。

首先看个例子,里面虽然两个列表样子一样,但是用的显示图片的代码是不一样的。示例:DEMO

如果你是第一次打开这个示例,肯定左边的列表图片是一张一张的显示,右边的列表图片是一起显示,这就是http请求。一张图片就是一个http请求,如果一个网页上面有几百张图片,比如说淘宝首页,那么将会是几百个http请求。再加上同时有很多游客会访问淘宝,这会导致服务器反应速度下降,甚至崩溃。这个时候,CSS Sprites就有很好的表现机会了,他能把不会经常变动的小图标集中到一张图片上,不但减少http请求,而且还降低了图片的大小,加快图片的加载速度。下面是我查看的十张小图的大小:

图片大小

下面是经过合并成一张图片的大小:

图片大小

相信大家能清楚的看见相隔有多少倍(不过我不知道是比较“大小”还是比较“占用空间”,不管是哪项,都小了许多)。但是你回头看看上面的DEMO,两个列表里面的图片效果是一样的,并不存在失真的情况,所以大型网站都会运用到CSS Sprites这项技术。

那么CSS Sprites的原理是什么呢?其实就是background-position在起作用。CSS中文手册里面这样解释background-position:设置或检索对象的背景图像位置。说白了,就是定义图片在页面里显示的具体位置,用坐标标注。那么,这个坐标又如何算了?下面有个很好的例子,相信你看了,就会懂的:DEMO

页面里有7个100*100的div,定义的background-position值为:

<div id="_mcePaste">.d1{background-position:0px 0px;}</div>
<div id="_mcePaste">.d2{background-position:-50px -50px;}</div>
<div id="_mcePaste">.d3{background-position:-100px -100px;}</div>
<div id="_mcePaste">.d4{background-position:-150px -150px;}</div>
<div id="_mcePaste">.d5{background-position:-200px -200px;}</div>
<div id="_mcePaste">.d6{background-position:-250px -250px;}</div>
<div id="_mcePaste">.d7{background-position:-300px -300px;}</div>

很明显,从7组坐标的数值来看,是从原点往右下延伸的,然后你在对比DEMO下面的坐标原图,发现7个div显示的效果却不是从我画的图片原点出发,而是从我画的图片的左上角,一直到右下角。所以你在写background-position坐标时,一定要把大图左上角的点当作原点,然后再来算你需要的图片的坐标。

最常见的拼图就是我最上面给的DEMO,小图标1-10呈竖线形式一顺往下排列,这个时候x轴的值是不会变动的,只要改变y轴值就行,而且y轴的值会越来越小,因为往下面的是负值了。好好想想这个地方,你就能很好的掌握这样一门实用的技术了。

如果不会拼图的朋友,其实网上有提供CSS Sprites样式生成工具,不仅把所有的小图片自动生成大图,而且提供准确的坐标。我前几天下载了一款,效果还是有的,只是合成的图片有些失真,所以就没用了,以后也不打算用,还是自己拼图比较方便。如果有需要的朋友请自行搜索吧。

最后提示几点,background-position的参数是x轴值 y轴值,不懂的参考CSS手册;x,y轴数值一般都≤0,因为图片位于坐标的右下角;拼图一定要设置成透明背景色。

两个DEMO源码下载:点我下载

>>原创文章,欢迎转载。转载请注明:转载自西门的后花园,谢谢!
>>原文链接地址:http://ons.me/125.html