雪碧图怎么使用(雪碧图怎么做)

在rem单位下使用雪碧图实现自适应

雪碧图是根据CSS sprite音译过来的，就是将很多很多的小图标放在一张图片上，就称之为雪碧图。

使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的距离隔开，就解决了上述的两个问题。

显示雪碧图的条件：

1）需要一个设置好宽和高的容器

2）需要设置background-position的值（默认为（0，0），也就是图片的左上角），即移动图片到自己想要的图标位置。

为了合并图片请求我们经常会用到sprite技术。在rem布局方案下，使用contain或cover来缩放背景图片就无法奏效了。因为元素的背景其实是sprite图片的局部，contain和cover只能对整张图片进行缩放，没办法控制到局部的大小。

在处理sprite图片时，我们只能给background-size取具体值。那么这个值取多少呢？其实只要写我们切出来的图片的实际尺寸就行。

比如我们的元素为5050px，sprite图片为200px 50px，那css应该如下：

需要引用的雪碧图如下

嘿！设计师 | 前端们说的“雪碧图”是什么？

通常来说，完成设计稿后设计师会使用设计软件中的切图插件来进行切图。用ps设计有切图神器cutterman，而设计新秀sketch也有许多不同的切图插件，它们可以很方便地导出图片，甚至能同时导出一倍图和二倍图，这可以满足我们绝大多数的需求。

但是，当图片很多时，这种方式不仅会伤害设计师的双手，也会因为大量的资源请求导致网页打开速度下降。这时候，雪碧图的优势就体现出来了，雪碧图本质上就是将众多图片拼贴为一张作为背景图片引用。

在详细介绍雪碧图之前，先说说背景图片的概念。前端在构建网页结构时，会使用很多的块元素堆叠嵌套，比如大标题 h1 、段落 p 、图片 img 等，图片标签 img 就是将图片引用进来直接显示，而背景图片则是给 h1 等元素的背景设置为图片。就好比给电脑设置背景图片，你可以控制它是自适应还是原始大小，重复或者不重复，同样地在网页中每个块元素的背景图片，可以控制它的适应方式、是否重复以及显示位置等。

当我们给一个元素设置固定大小，让它的背景图片位置进行变化，就好像显示出了不同的图片，这就是雪碧图的原理，有点类似ps里的创建剪切蒙版。下图左边就是网易云音乐的一张雪碧图，右侧就是用剪切蒙版演示的雪碧图原理。

一般来说，在某一模块（比如一个播放器）需要的图片很多而每张图片又不是很大时，可以考虑切成雪碧图交给前端。但目前很多前端构建工具里面有雪碧图合并功能，所以如果前端使用了构建工具可以把合并的功能交给前端。

雪碧图还有一个妙用，那就是替代gif。设计师都知道，透明背景的gif动图在导出时回带有毛边，在颜色反差很大的背景色上更明显。因此，可以考虑将多帧图片横向排列，以雪碧图的形式每隔固定时间改变背景图片的位置，因为本质上还是png图片，所以毛边的情况就可以解决了。可以参考我之前的文章： 透明背景gif图的锯齿是个什么鬼？ 。

那么问题来了，为什么叫“雪碧图”呢？叫“可乐图”、“芬达图”、“王老吉图”不行吗？这个，我也不知道。

如何规划站点的雪碧图?

一般会有哪几种类型的雪碧图？雪碧图的尺寸该设置多大？如何排列？雪碧图在站点中如何分布？是否曾经烦恼过以上几点问题？带着上面几点问题，我们一起来探讨站点的雪碧图该如何规划比较合理。首先让我们回忆一下，以前切页面时，会用到哪些类型的素材图？我努力的想…努力的想啊…大概有：按钮、图标、其它固定尺寸背景图、横竖平铺背景图、横铺背景图、竖铺背景图、左右自适应背景图、上下自适应背景图、颜色鲜艳且尺寸较大的背景图。好像有点乱，让我们分下类。按雪碧图使用的作用域可分为：跨项目通用、全局、栏目级、页面级按雪碧图实现方式可分为：固定尺寸雪碧图、横铺雪碧图、竖铺雪碧图(比较少用)、横竖平铺背景图(比较少用)?0?2那么，再把我们回想的素材图归下类：按作用域：这些素材在不同站点都有可能出现在不同作用域中按实现方式：固定尺寸雪碧图：按钮、图标、其它固定尺寸背景图、颜色鲜艳且尺寸较大的背景图横铺雪碧图：横铺背景图、左右自适应背景图(不使用九宫格的实现方式)竖铺雪碧图：竖铺背景图、上下自适应背景图(不使用九宫格的实现方式)横竖平铺背景图：这种图不能合成雪碧图，一般用于网页背景花纹，大部分站点比较少出现最后，从站点的可实现性上考虑，我们该做多少张雪碧图？请看下面这张表：从表中可以分析出，一个页面的背景图的请求数为：看到最最多的情况，是不是震惊了？呵呵，其实很少会发生全部用的情况，根据页面实际情况组合使用，请求的个数不会很多，跟第一张图例的背景图请求数相比，规划清晰很多，请求数也减少很多了。这些图该如何切、如何分布、命名，有没什么讲究？以下是我个人的观点和建议：?0?2横铺图宽度使用20px, 使用1px宽度横铺会有渲染性能问题，竖铺同理。我就不详细说明了，网上搜索，有相关示例。固定尺寸的雪碧图一般可设定为宽度是网页宽度的一半，高度随图片内容增长。因为切图前你可能不确定用多大尺寸，我的见解是，到切图后期你可能不需要单独用一张repeat-x.png的图放左右自适应的背景图，多数情况我们会用2个标签采用滑动门的方式实现左右自适应的背景，而页面宽度的一半即可实现最大宽度的左右自适应背景，那么这时你可以把左右自适应的背景放进这张雪碧图中了拼合图片时固定尺寸的图与图之间相隔1像素，避免浏览器放大时，尺寸多计算1像素时可见到临近的图片栏目级雪碧图的名称按栏目级目录名命名，页面级雪碧图的名称按页面名称命名，组件类和皮肤类雪碧图同理，其它的可按表中的名称命名，这样方便区分和后期管理跨项目通用的组件或某个组件的图片内容较多、修改频繁，可以独立出一张组件图，按组件名命名，方便管理如果站点的全局图标比较多，可以考虑将图标单独做一张雪碧图建议图标使用一个新标签实现，而不是直接用有内容的那个标签设定图标背景，这样你需要给雪碧图图标与图标之间多留一些间距，另外遇到不同行高的时候，为了让图标背景垂直居中，还需要重新设定background-position，这种实现方式不利纳入全局样式以上是个人的一些经验和观点，仅供参考，大家对雪碧图的规划有什么好的建议和看法，欢迎留言一起探讨。

精灵图(sprites)：使用 代码 案例

使用精灵图核心：

1、精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中。

2、这个大图片也称为sprites 精灵图或者雪碧图

3、移动背景图片位置，此时可以使用background-position

4、移动的距离是这个目标图片的x和y坐标，注意网页中的坐标有所不同

5、因为一般情况下都是往上往左移动，所以数值是负值。

6、使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。