CSS Sprites 技巧总结

CSS Sprites 技巧总结

使用css sprites 一般会遇到一下三种情况：

1、所有css sprites 中的小图片都无需平铺，即背景使用 no-repeat 属性。（一般应用在已经固定大小的box上，比较常用）

     @ 这种情况下将所有图片合成一张大图即可，在间隙和排列方面无特殊要求。

2、css sprites 中的小图需要横向平铺，即背景使用 repeat-x 属性。（一般应用在菜单、box背景等水平重复的地方，常用）

     @这种情况，将需要横向平铺(水平重复)的小图片纵向排列，从上到下只能排成一列，最好是宽为1px。（所有小图的宽度都必须相等，在这里是所有小图宽度都为1px）

3、css sprites 中的小图片需要纵向平铺，即背景使用 repeat-y 属性。(一般使用在未定高度box的左右边框修饰，不常用)

      @这种情况，将需要纵向平铺(垂直重复)的小图片横向排列，从左到右只能排成一行，最好是高为1px。（所有小图的高度都必须相等，在这里是所有小图高度都为1px）

综合运用：将网站所有图片制作成三张图片，一张是固定大小无需平铺的图片，一张是宽1px的横向平铺用图片，第三张是高1px的纵向平铺用图片。

 

add： 网络上搜索到一篇文章：叫做 “CSS Sprites背景平铺资料整理” 讲的很详细。