雪碧图背景自适应，大小随便缩放（用百分比实现）

1.使用场景（项目得做移动端的适配）

项目中要用到表示日期的图片共31张如

现在想通过雪碧图来减少http请求，提升网站的性能。

2.思路：

用了个插件gulp-css-spriter(能够合并css上的图片，并且自动重写css的background)

得到以下图片（俗称雪碧图）

和一堆css，如下：

.date-22 {
  background: url("../../images/datepic/dates.png");
  background-position: -300px -264px;
  background-repeat: no-repeat;
}

问题：

1.如果前端那个图片大小是固定的像素，则用

background-position: -300px -264px;

这样的写法完全没有问题，但现在要实现一个雪碧图自适应的功能，即无论改变图片的长宽，它的背景都是这张完整的图片。

2.普通图片，直接一个属性background-size:cover;图片就可以随便缩放了，但雪碧图，一整张，不行。

知识准备：background-size和background-position 这两个属性，详细了解其参数为百分比和数字时的使用方法。

background-position:50% 50%;图片水平和垂直居中。与 background-position:center center;效果等同。

等同于x：{容器(container)的宽度—背景图片的宽度}*x百分比，超出的部分隐藏。
等同于y：{容器(container)的高度—背景图片的高度}*y百分比，超出的部分隐藏。

注意：百分比的正负和x,y的正负与（容器宽度-背景宽度大小）有关

解决：

改造css代码如下，就能实现

.date-22 {
  background: url("../../images/datepic/dates.png");
  background-position: 20% 80%;
  background-repeat: no-repeat;
  background-size: 600% 600%;
}

理解：
因为一张图片横竖都分6排，所以通过background-size先把图片横竖放大600%。

左上角那张数字16对应的 background-position:0 0;(这不难理解)

第二张01对应的 background-position:20% 0;  对应上面的公式理解下：假设我图片实际像素为55px。公式（55-6*55）*20%=-55px   即图片左移一个单位

效果：

能实现雪碧图自适应缩放效果，即根据缩放比例去设定图片的长宽，图片都可以完好的显示