如何制作和使用 css sprites 图片 – 教程大全 工具集合

什么是CSS Sprite CSS Sprite 又叫CSS精灵，它的原理很简单，将网站上零散的小图片（或图标）整合在一张大图上，再用CSS中 “background-image”属性来定位图片的X/Y轴位置，从而减轻服务器对图片的请求数量，提高网页加载速度。因为对于当前大多数网速而言， 不高于200KB的单张图片所需载入时间基本是差不多的，如果页面上有20张小图片或图标，那么服务器会载入20次。但使用CSS Sprite将图片整合成一张大图后，服务器只需要载入一次就够了，很大程度上优化了图片加载速度，这在门户型网站尤为明显。 CSS Sprites优点 利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因； CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。 CSS Sprites缺点 在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内不会出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂； CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，没什么难度，但是很繁琐； CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。 CSS Sprite的例子 看看YouTube如何使用CSS Sprites，它使用了一个2008像素高的CSS Sprites：   CSS Sprite 实例 如果不会拼图的朋友，其实网上有提供CSS Sprites样式生成工具，不仅把所有的小图片自动生成大图，而且提供准确的坐标。效果还是有的，只是合成的图片有些失真，而且不方便自己调试代码，所以自己用fireworks来制作图片和调试十分方便。 制作和使用css sprite图片时注意的事项： 最好竖行排列这些图片，这样有利于将来的扩展； 每个图片之间要预留出足够多的空白，这样使用的时候，不至于将其他的图片显示出来； 一定要使用图片的height和width属性，不管以前的代码中有没有，你都要将这些属性写上，并根据其在css sprite图片的位置和在网页上显示区域的大小来确定其height和width的大小; background-position的x，y轴数值一般都 ≤ 0，因为图片位于坐标的右下角； 同时拼图时，一定要将画布设置成透明背景色。 background-position(图像背景位置)这个属性是CSS中非常重要的属性。 根据CSS规范，background-position属性包含了两个(可选的)变量：水平位置(horizontal)和垂直位置(vertical)，例如： .introduction {   background-image: url(bg.gif);   background-position: [horizontal position] [vertical position]; [...]