怎样制作CSS精灵图

html-css022

怎样制作CSS精灵图,第1张

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

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

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

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