CSS-如何实现css分片

CSS-如何实现css分片

浮生未歇 发布于 2017-01-27 字数 131 浏览 1078 回复 5

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

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

偏爱自由 2017-09-07 5 楼

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

想挽留 2017-09-02 4 楼

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

CSS Sprite Generator

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

多国语言可以选择

希望对各位有帮助

泛泛之交 2017-04-25 3 楼

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

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

甜柠檬 2017-03-29 2 楼

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

偏爱自由 2017-03-27 1 楼

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