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

html-css011

在rem单位下使用雪碧图实现自适应,第1张

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

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

显示雪碧图的条件：

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

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

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

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

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

需要引用的雪碧图如下

https://www.toptal.com/developers/css/sprite-generator

说白了就是把很多背景图片 合到一起放在一张大的图片上,

设置背景的时候, 用 图片的 偏移量 来控制.

好处: 在背景图片很多的情况下, 多次请求减少为1次请求, 加快网页的速度.

劣势也很明显: 维护起来很麻烦, 想改任一个图标, 都要打开这个大图片, 而且位置什么的都 维护起来很吃力.

1、将用到的背景图片压缩为zip格式的压缩包

2、用Css图片拼合生成器将其拼合成一张图片，然后下载该图片

3、拼合完成后会生成相应的Css规则，该文件定位了每个图片的位置及图片的宽度和高度

4、在Css样式中定位背景图片！