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

什么是CSS Sprite

CSS Sprite 又叫CSS精灵,它的原理很简单,将网站上零散的小图片(或图标)整合在一张大图上,再用CSS中 “background-image”属性来定位图片的X/Y轴位置,从而减轻服务器对图片的请求数量,提高网页加载速度。因为对于当前大多数网速而言, 不高于200KB的单张图片所需载入时间基本是差不多的,如果页面上有20张小图片或图标,那么服务器会载入20次。但使用CSS Sprite将图片整合成一张大图后,服务器只需要载入一次就够了,很大程度上优化了图片加载速度,这在门户型网站尤为明显。

CSS Sprites优点

  1. 利用CSS Sprites能很好地减少了网页的http请求,从而大大的提高了页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
  2. CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
  3. 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。

CSS Sprites缺点

  1. 在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内不会出现不必要的背景;这些还好,最痛苦的是在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂;
  2. CSS Sprites在开发的时候比较麻烦,你要通过photoshop或其他工具测量计算每一个背景单元的精确位置,没什么难度,但是很繁琐;
  3. CSS Sprites在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的css,如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动css。

CSS Sprite的例子

看看YouTube如何使用CSS Sprites,它使用了一个2008像素高的CSS Sprites:

 

CSS Sprite 实例

如果不会拼图的朋友,其实网上有提供CSS Sprites样式生成工具,不仅把所有的小图片自动生成大图,而且提供准确的坐标。效果还是有的,只是合成的图片有些失真,而且不方便自己调试代码,所以自己用fireworks来制作图片和调试十分方便。

制作和使用css sprite图片时注意的事项:

  1. 最好竖行排列这些图片,这样有利于将来的扩展;
  2. 每个图片之间要预留出足够多的空白,这样使用的时候,不至于将其他的图片显示出来;
  3. 一定要使用图片的height和width属性,不管以前的代码中有没有,你都要将这些属性写上,并根据其在css sprite图片的位置和在网页上显示区域的大小来确定其height和width的大小;
  4. background-position的x,y轴数值一般都 ≤ 0,因为图片位于坐标的右下角;
  5. 同时拼图时,一定要将画布设置成透明背景色。

background-position(图像背景位置)这个属性是CSS中非常重要的属性。

根据CSS规范,background-position属性包含了两个(可选的)变量:水平位置(horizontal)和垂直位置(vertical),例如:

.introduction {

  background-image: url(bg.gif);
  background-position: [horizontal position] [vertical position];
  height: ??px;
  width:??px;

}

.btn_top {
  background-image: url("images/btn_white_tr.gif");
  background-image: url("http://blog.shouji-zhushou.com/favicon.ico");
  background-position: -45px -10px;
  height: ??px;
  width: ??px;
}
.btn_top div {
  background-image: url("images/btn_white_tl.gif");
  background-image: url("http://blog.shouji-zhushou.com/favicon.ico");
  background-position: -10px -40px;
  height: ??px;
  width: ??px;
}
.btn_bottom {
  background-image: url("images/btn_white_br.gif");
  background-image: url("http://blog.shouji-zhushou.com/favicon.ico");
  background-position: -45px -70px;
  height: ??px;
  width: ??px;
}
请将’??’换成你要在网页中使用的值即可。

使 用这个属性,你可以定义块级元素的背景图像位置,可以使用%百分比或px像素为单位来定义图像开始的位置,也可以使用关键字:top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right等关键字。

在“ background-position: x% y%; ”这样一个语句中,x%指水平偏移,y%指垂直偏移,左上角是:0%,0%,右下角是:100%,100%,默认的是50%。

Top Down