什么是精灵图？在css中如何使用精灵图

html-css016

什么是精灵图？在css中如何使用精灵图,第1张

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了`http2`。

具体请查看“background-image”，“background- repeat”，“background-position”的使用方法

方法1.用ps或者dw把需要的图片切下来，自己通过ps，把需要的图片整合拼合成一张图片。在利用css中的background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片在布局盒子对象位置，当然这种效率是最慢的一种。

方法2.最简单的一种。（推荐用这种）把需要的图片用ps切出来，然后在线生成http://www.cn.spritegen.website-performance.org/ 只要把需要的图片放在里面，即可生成你需要的css代码。