西门的后花园

一个热爱网络的年轻人的博客

CSS Sprites新手教程

刚开始认真学习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值为:

.d1{background-position:0px 0px;}
.d2{background-position:-50px -50px;}
.d3{background-position:-100px -100px;}
.d4{background-position:-150px -150px;}
.d5{background-position:-200px -200px;}
.d6{background-position:-250px -250px;}
.d7{background-position:-300px -300px;}

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

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

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

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

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

评论列表

  1. 不错不错,例子还是不够美观~~ :mrgreen:

  2. 学习了 增长知识 我喜欢

  3. 前几天本来想用这个技术做一个导航,可是发现自己技术还是不行,
    所以最后还是将图片分成几个不同的部分

  4. 这是写给我们小白看的 🙄

  5. 原来这叫做CSS雪碧啊,一直知道有这个方法,想不到有个专有名词~~雪碧哈哈!

  6. 已经应用在主题上了 :mrgreen: :mrgreen:

  7. 西西最近,忙的很麻,俺来骚扰你了。。。 😈

  8. 学习了 这东西其实有必要看一下的

  9. 啊,原来我还不知道有这个,对了 跟你说的那个事情,那本书我真的想看哦 !

  10. 我就喜欢看例子!~

  11. 这么小 太精彩,我去也去试试

  12. 只是不想动手拼图。。。还是找工具吧

  13. 呵呵..不错啊..连这些都能做出来了。。

  14. 上次的主题好像有用到 不过自己搞不定

  15. 精彩的地方怎么可以少了我呀

  16. 玩个点名游戏吧?有兴趣不?http://www.longzaivision.com/?p=714

  17. 最近刚好想关注一下css sprite,关注博主更新~

  18. 这个 我看过 很毒鼠标放上去动态变换的 也是靠这个技术 对吧 呵呵

  19. 属于技术贴,菜鸟来存粹支持了。 :mrgreen:

  20. 呵呵,大小是实际字节数,不会变化。占用空间是在硬盘上使用的空间数,根据簇大小会有变化

  21. 很白的村长要好好看看。。

  22. 博主写的很用心,赞一个,继续加油哦,关注

  23. 纯属支持,来踩,来顶!多点生活类的多好啊,呵呵

  24. 我是来骚扰的、、、 😀

  25. 西门写的不错,这几天我也研究css sprite呢,刚才“苏扬 ”在我博客那边提到西门你这边有这样的实例,就过来看看。现在我那边有几篇很经典的关于css sprite的文章,不过都是转载的,我有时间也把心得写一下。

    • 看了你下,你那输入高手阶段了,而我这写的是新手如何理解CSS Sprites这个技术而已。因为我就是通过类似的一个坐标图片来理解的。

  26. 头一次听到CSS Sprites,长知识了

  27. 😎 虽然还不是很明显 不过似懂非懂了

西门进行回复 取消回复

分类目录