CSS Sprites

关注

最新推荐文章于 2026-06-21 14:16:57 发布 125 阅读 AI 写同款· GEO 优化 ›

CSS Sprites简介
　　说白了，CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的"background-image"，"background- repeat"，"background-position"的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
　　当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。
具体的实现DEMO：

<style type="text/css">
.min, .max {
  width:16px;
  height:16px;
  background-image:url(attachments/month_0805/4200859125518.png);
  background-repeat: no-repeat; //我们并不想让它平铺
  text-indent:-999em; //隐藏文本的一种方法
}
.max { background-position: 0 -350px;}
//加上图像定位,定位数值可以用PS准确得到,也可以自己不断调试得到.
</style>
</head>
<code><body>
<div class="max">最大化</div>
</body>

这样便可以准确定位并显示出一张大图上的某个小图了。
CSS Sprites优点

　　我们从前面了解到，CSS Sprites为什么突然跑火，跟能够提升网站性能有关。显而易见，这是它的巨大优点之一。普通制作方式下的大量图片，现在合并成一个图片，大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。

CSS Sprites缺点

　　至于可维护性，这是一般双刃剑。可能有人喜欢，有人不喜欢，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。

　　由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。

　　前面我们也提到了，必须限制盒子的大小才能使用CSS Sprites，否则可能会出现出现干扰图片的情况。这就是说，在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。YUI的解决方式是，加大图片之间的距离，这样可以保持有限度的缩放。

CSS Sprites总结

　　性能压倒一切。CSS Sprites是值得推广的一种技术。尤其适宜用于FIR，比如固定大小的icon替换。为保持兼容性，图片中的各个部分保持一定的距离是一种不错的做法。

CSS 图片合成制作流程

1、准备工作
利用图片处理工具做好多个小图标，建议20px ,20px ，gif或png可透明格式。
将小要合并的小图标名统一，建议：名称+序号+后缀。

2、合并图片并生成CSS文件
方案一：
    利用单机软件，如：CssBgImageMergeTool 可手动排列图标间距生成大图，并生成固定单一的CSS文件。
方案二：
   利用在线CSS图片合成网站合成，如：http://cn.spritegen.website-performance.org/
   将要合并的小图标打成一个zip包，上传，设置好排列方向和间距就可以自动合成并生成css代码。
方案三：
   大量图标情况下，先利用图片工具批量合成大图片，自编代码根据合成图片名称和图片像素生成CSS定位文件。