CSS-如何实现css分片

Question

我们经常看到在一个图片上合成了N多小图片,在页面使用时通过css去定位拆分,可以减少HTTP请求数量,到底这项技巧是如何实现的呢,请解答

Answer 1

方法是控制 background 的位置，但我看这样做的好处是：在切换 background 的时候，没有加载的过程（因为已经加载了，直接移位就好），这样就不会有“缺图”的现象。
比如你一个按钮，正常是红的，鼠标放上去时是绿的，如果是两张图的话，鼠标放上去的时候，还要再加载绿图，这时，按钮有一段时间是没有背景的，不好看。

Answer 2

对于那些兼做前端的后台程序员来说，如何控制CSS spirite大图中各个背景图的位置安排确实是一件头大的事，那我就来共享一个在线工具吧

CSS Sprite Generator

url: http://spritegen.website-performance.org/

多国语言可以选择

希望对各位有帮助

Answer 3

使用css切割图片主要是可以减少http的请求次数，另外可以避免出现有一段加载的空白间隙，方法是通过css的background控制图片显示的top,left等值，如下所示：

background:url(image/bg.png) -10px -20px no-repeat;

Answer 4

CSS Sprites-其原理是通过负定位实现。

Answer 5

就是通过css的background属性加载图片时控制位置来实现的，除了减少请求次数外，还可减少图片在硬盘上占用的空间。