CSS Sprite 雪碧图制作

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS Sprite 雪碧图制作相关的知识,希望对你有一定的参考价值。

CSS Sprite 雪碧图,简单来说就是:

为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需要相关图标时,根据background-position设置坐标值,达到目的。

技术分享

 

一个例子,可以复制然后看一下效果:

 html代码:

<!DOCTY

以上是关于CSS Sprite 雪碧图制作的主要内容,如果未能解决你的问题,请参考以下文章

CSS Sprite雪碧图的应用

个人对于css sprite的一点点简介

sprite学习

css 雪碧图 及jquery定位代码

gulp-css-spriter 雪碧图合成

移动端适配之sprite雪碧图背景定位