CSS 背景属性中的background-size简写（CSS3）

在本文中，我们将介绍CSS中背景属性的一个重要特性，即background-size简写。通过使用background-size属性，我们可以控制背景图像的尺寸以及如何适应容器。

阅读更多：CSS 教程

背景属性简介

在CSS中，我们可以使用background属性为元素设置背景样式，例如背景颜色、背景图片等。而background-size属性则是用来调整背景图片的尺寸的。该属性可以与background-position一起使用，以达到图像布局的目的。

background-size属性

background-size属性允许我们指定背景图片的大小。它可以接受以下几种值：

cover：将背景图片调整为完全覆盖容器，可能会裁剪图像的某些部分；
contain：将背景图片调整为完全适应容器，可能会在图像周围留有空白；
length：使用一个具体的像素值或百分比来指定背景图片的大小；
auto：使用图像的实际大小作为背景图片的大小；
initial：将background-size属性重置为默认值；
inherit：继承父元素的background-size属性。

下面是一些示例代码，以帮助理解background-size的用法：

.example1 {
  background-image: url("image.jpg");
  background-size: cover;
}

.example2 {
  background-image: url("image.jpg");
  background-size: contain;
}

.example3 {
  background-image: url("image.jpg");
  background-size: 200px 300px;
}

.example4 {
  background-image: url("image.jpg");
  background-size: auto;
}

在这些示例中，我们可以看到不同的background-size属性值对背景图片的效果产生的不同影响。通过调整这些值，我们可以创建出各种不同的背景效果。

background属性中使用background-size简写

除了单独使用background-size属性外，我们还可以将其与其他背景属性一起使用的简写形式。通常，background属性的写法为：background: color image position/size repeat attachment origin clip;。

在这个简写格式中，我们可以将background-size写在background属性的第四个参数位置上。下面是一个示例代码：

.example {
  background: red url("image.jpg") center center/cover no-repeat fixed content-box padding-box;
}

在这个示例中，我们将background-size设置为cover，这样背景图片将被调整为完全覆盖容器。

兼容性考虑

在使用background-size属性时，我们需要考虑不同浏览器的兼容性。基本上，现代浏览器都支持这个属性，但是为了确保在旧版浏览器上也能正常显示，我们可以使用厂商前缀来确保兼容性。针对不同浏览器的厂商前缀如下：

-webkit-：Chrome、Safari、Opera 浏览器；
-moz-：Firefox 浏览器；
-o-：Opera 浏览器；
-ms-：Internet Explorer 浏览器。

例如，我们可以将上述示例中的代码修改为：

.example {
  background: red url("image.jpg") center center/cover no-repeat fixed content-box padding-box;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

这样，我们就可以兼容大部分现代浏览器以及一些旧版浏览器。