雪碧图的使用

版权声明：本文为网上转载。

在网站开发中，咱们常常会使用一些背景图片来点缀效果，如一些形象生动的小图标。这种背景图片一多，网络请求就多了。这样为了减小网络请求，咱们把一些小的背景图合并在一个大的图中，而后经过 CSS 的背景定位技术去使用。咱们把这种技术叫作 CSS Sprite，也叫雪碧图，还叫 CSS 精灵。

如在腾讯课堂的网页中，打开调试工具，咱们不难发现其也使用到 CSS Sprite 的技术。

雪碧图的应用原理

经过上面讲述，咱们知道雪碧图是一张大的合并图，每一个小图标其实只是截取大图的一部分来显示。以下图所示，咱们有一张带有各类表情图标的雪碧图，其中每一个表情图标都占领着相应的位置。

假如咱们须要显示开心表情的这一个图标，咱们须要计算开心图标在合并图中相应的位置和其图标的大小。以雪碧图的左上角为坐标中心，咱们得出开心表情恰好在坐标的原点，即 X 轴0像素，Y 轴0像素的位置，且咱们能够得出图标的宽高均为96像素。

所以咱们设置这个图标元素的背景图片为这张雪碧图，背景位置为图标在雪碧图中的坐标，这样开心的图标就显示出来了。

.happy { display:inline-block; width: 96px; height: 96px; background-image: url(sprite.png); /* 设置背景图片 */ background-repeat: no-repeat; /* 设置为不平铺 */ background-position: 0 0; /* 设置图标位置 */ } 

假如咱们还要使用到哭泣的表情。同理所得，计算出哭泣的图标的位置在雪碧图的 X 轴向右192像素， Y 轴向下96像素。

所以为了显示哭泣表情，咱们能够这样写。

.cry { display:inline-block; width: 96px; height: 96px; background-image: url(sprite.png); /* 设置背景图片 */ background-repeat: no-repeat; /* 设置为不平铺 */ background-position: -192px -96px; /* 设置图标位置 */ } 

上面的例子已经阐述了如何使用雪碧图，不过初学者可能会对哭表情 background-position 为负值有所疑惑。为了说明这个问题，咱们先看下平常生活中的放大镜：

平时咱们使用放大镜通常拿着放大镜移动以查看对应的放大效果，下面的东西不动。如今假设若是咱们放大镜不动，移动下面的东西是否是也能够查看对应的放大效果呢？

若是把咱们要显示图标的区域（元素大小）当作是放大镜，它是不动的，而背景图片就是要放大的东西，为了要显示对应的图标就得移动了。前面咱们已经说了 background-position 的坐标系：向右为 X 轴正值，向下为 Y 轴正值。

如今咱们要使用哭的表情，其实就是把它从（192px, 96px）移到（0, 0）那个位置（元素的位置，至关于放大镜的默认位置），这样就要向左移动192px，向上移动96px。根据向右、向下为正，那么向左、向上移动天然就是负了。

最后咱们整理下，发现能够把共同的部分抽出来定义一个 class，这样咱们就不用去定义每个表情的背景图片了，以下所示：

.sprite { display:inline-block; width: 96px; height: 96px; background: url(sprite.png) no-repeat; /* 设置背景 */ } .happy { background-position: 0 0; /* 设置图标位置 */ } .cry { background-position: -192px -96px; /* 设置图标位置 */ } 

上面实例在线demo：CSS Sprite。

制做雪碧图

制做雪碧图的方式有许多，大概有以下几种方法：

• 使用 photoshop 等图片编辑工具

  对于简单的雪碧图，咱们能够经过 photoshop 等图片编辑工具来手动合并图标到一张大图中。

• 在线工具

  目前有许多在线合成雪碧图的站点，只须要将图片上传上去，即可以根据设置，生成想要的雪碧图以及对应的 CSS 样式文件，如 spritegen、css sprites generator。

  甚至咱们合好的图片，也能够经过 spritecow 来帮咱们完成对应的 CSS 定位。

• 构建工具

  除了上面两种，咱们还能够经过如webpack, fis3, gulp等构建工具来完成雪碧图生成工做。具体可参考下面连接（JS 部分咱们会具体讲解构建工具）：

  • webpack 自动雪碧图生成
  • fis3 CssSprite图片合并

雪碧图与字体图标优劣

前面咱们已经说了可使用 iconfont 来搞图标，如今咱们又介绍了雪碧图，那么这两种办法对一些图标的处理都有什么优劣呢？

总得来讲，使用字 iconfont 或者雪碧图都存在着相应的优势和缺点。所以咱们须要结合各自的优劣，来综合考虑使用哪一种方案。

雪碧图的优点

• 图标更美观

  因为 iconfont 的图标只能设置单色，而雪碧图的图标因为是图片，因此能展示出更为美观的图标效果。

• 制做成本更低

  iconfont 的制做较为麻烦，须要设计师按照规范，一一制做图标的 svg 文件。而雪碧图的制做只需合并图片便可，在制做成本上更低。

雪碧图的劣势

• 高清屏下会失真（第三章会介绍）

  在 2x 的设备像素比的屏幕上，若是要达到和文字同样的清晰度，图片的宽度须要实际显示大小的两倍，不然看起来会比较模糊。

• 雪碧图不方便变化

  雪碧图本质上是一张静态的图片，所以没法灵活地经过样式去动态改变图片图标的颜色和其余效果。