看了前端观察上的一片文章(http://www.qianduan.net/to-sprite-or-not-to-sprite.html),我在这里自己小小的归纳一下。
首先介绍下CSS Spirits。CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染(值得一提的是,这也就意味着你的标签变得更加复杂了,图片是在CSS中定义,而非<img>标签)。
CSS Spirits的好处嘛,就是提高页面的加载速度。
但是如果我们没有处理好图片的话反而会适得其反。目前很多浏览器都有整页缩放功能,浏览器就需要做一些额外的工作来纠正这些图片边缘的行为——基本上来说,是为了避免雪碧中相邻的图片被“露进来”。另外如果我们整合出来的图片有大面积的空白又或是将高矮不一的图片整合到一起,那只会造成浏览器的负担,浪费内存。下面是一些网友在该文评论中提到的CSS雪碧的某些不足:CSS 雪碧调用的图片不能被打印,除非在@media中特别添加 print声明——by RichB;如果要修改雪碧中的一个图片,你就要修改整张图片,这无疑会增大工作量——by Tom B。
我个人认为如果是将尺寸类似的图片整合在一起,那还是蛮有效的,比如说导航栏的小图标。只要我们处理得当,CSS Spirits还是蛮有用的。
另外在文章的留言里,大家还提出一个问题:repeat和no-repeat的图片是不能放在一起?答案是,一般处理的好 no-repeat 和 repeat-x的放一起是没有问题的,但是repeat-x和repeat-y的图片放一起就要慎重了。
再贴一篇关于CSS Spirits的文章《 CSS Sprites:鱼翅还是三鹿》,作者主张不要滥用CSS!
![](https://img2024.cnblogs.com/blog/35695/202408/35695-20240826070647288-243310440.jpg)