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定位文件。