豫ICP备17040950号-2

css雪碧图

设计开发
文章目录
  1. 1. 前言
  2. 2. 制作
  3. 3. 定位
    1. 3.1. 位置
    2. 3.2. 大小
    3. 3.3. 移动端
  4. 4. 后记
  5. 5. 书签

前言

CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

优点：减少加载网页图片时对服务器的请求次数，提高页面的加载速度，减少鼠标滑过的一些bug。

制作

雪碧图的制作，可以使用PS，也可以使用专门的雪碧图制作工具。制作时，最好制作成一列或者一行，定位时会方便一些。下面这个工具挺好用，分享给大家：https://yunpan.cn/cMKygj2hnrBBe 访问密码 f516

css雪碧图简单制作工具（源码）
https://github.com/iwangx/sprite

如果要制作svg雪碧图，推荐使用AI。

定位

位置


雪碧图定位的关键，在于background-position。诀窍在于“调试”，在页面控制背景图上下左右移动，很快就定位好了。


以上面的雪碧图为例，假设我们要显示微博的图标，那么scss代码如下：

1
2
3
4
5
6
.icon-weibo{
    width: 20px;
    height: 20px;
    background: url(../../img/test/index/icon.png) no-repeat;
    background-position: 0px -60px;
}

大小

假设我们的要显示的图标比雪碧图大，或者比雪碧图小，该怎么办？background-size。

1
2
3
4
5
6
7
.icon-weibo{
    width: 40px;
    height: 40px;
    background: url(../../img/test/index/icon.png) no-repeat;
    background-position: -2px -116px;
    background-size: 118%;
}

移动端

很多时候，我们并不使用px作为单位，而是rem或者百分比，这时候，该怎么控制雪碧图的位置和大小？利用svg图片。

1
<span class="i i_menu_0"></span>
1
2
3
4
5
6
7
8
9
10
11
12
.i {
    width: 0.8rem; height: 0.8rem;
    background: url(../images/ico_global.svg) no-repeat;
    display: inline-block;
    background-size: 1100%;
}
.i_menu_0 { background-position: 0% 0%; }
.i_menu_1 { background-position: 10% 0%; }
.i_menu_2 { background-position: 20% 0%; }
.i_menu_3 { background-position: 30% 0%; }
.i_menu_4 { background-position: 40% 0%; }
.i_menu_5 { background-position: 50% 0%; }

后记

至于PS和AI的使用，在慕课网和网易云课堂上有很多优秀教程，不要错过。

书签

CSS雪碧图的实现方法（即背景定位）
http://www.suixin8.com/59.html

CSS3技术-雪碧图自适应缩放
http://www.imooc.com/wiki/detail/id/183

利用动态viewport+rem制作一张自适应的svg雪碧图icon
http://www.open-open.com/lib/view/open1452229325136.html

SVG的用法
http://www.webhek.com/svg/