CSS中background新特性

这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战

background-size

我们在开发中几乎很常见background-size属性，而且写法有很多种,例如px、百分比、cover、contain这些都可以使用：

background-size：66px 66px;
background-size：cover;
background-size：33% 44%;
background-size：containi;
background-size：55%;
background-size：auto 99px;
background-size：auto 23%;

其中cover和contain的属性值是最常用的，因为这两个属性值都不会改变背景图的原始比例，cover从字面上理解是覆盖的意思，我们可以让背景图尽可能的把当前原始覆盖住，可能会有一部分图片显示不出来，而contain从字面上理解是包含的意思，表示我们将背景图放在当前元素区域中，可能会留出空白区域，但是图片都能完全显示出来。

数值和百分比

当我们给background-size设置百分比或者数值时，都不应该设置为负值，百分比是相对于元素的背景定位区域来计算。而background-origin就是决定背景定位区域的，默认值为padding box。

.box-wrapper {
    width: 40px;
    height: 40px;
    background-size: 100% 100%;
}

background是包含background-size属性的，但是我们要注意写法，就是background-position的属性值是在background-size的前面的，并且需要使用斜杠进行分隔，不然写法可能无效：

// 有效写法
background：10/100% url(test.png);
background: url(test.png) no-repeat center/100%;
// 无效写法
background: url(test.png) /100%;
background: url(test.png) no-repeat /100%;

我们还可以利用css渐变和background-size属性绘制一个深天蓝色的像素点：

.wrapper {
    background: linear-gradient(deepskyblue, deepskyblue) no-repeat center/2px 2px;
}

space和round模式

平时我们如果平铺小尺寸的图片，我们可以使用space，但是如果遇到背景图像比背景定位区域的尺寸大一些，我们如何处理？

1、此时无效的background-position属性会生效，当背景显示区域只能显示出一张图像时，我们就使用background-position的属性来控制这个图片的定位。

2、当平铺图像尺寸比背景显示区域尺寸大，在不同浏览器中就会显示不同的效果，图像在Chrome和Firefox浏览器中可以显示，图像在IE和Edge中是无法显示出来的，所以我们如果使用space最好不在IE浏览器中渲染或者保证平铺图像的尺寸比元素的尺寸小。

round的背景图像会被拉伸，不会留下空隙，但是如果定位区域空间变大，如果剩余空间大于图像宽度的一般，那么我们添加一个新的图片时，会让当前所有的图像被压缩，从而将新添加的这个图片放在压缩留下的空间中。

.image {
    background-repeat: round;
    border: 1px solid #ccc;
    background: url(test.png) center / auto 100%;
}

当然除了这两个关键字(space，round)之外，可以设置背景图像的平铺方式，并且改变了background-repeat属性的语法，图像平铺方式为水平和垂直方向。

// space平铺垂直方向， round平铺水平方向
background-repeat: round space;