你可以做一些非常巧妙的事情一旦你理解了你可以利用继承。然而，首先让我们了解一下这个文档的背景:

使用CSS3，你可以为元素应用多个背景。这些都是 与你提供的第一个背景相叠加 最后一个背景列在后面。只有最后一个背景 可以包含背景色。

所以当有人这样做的时候:

background: red;

他将背景色设置为红色，因为红色是最后列出的值。

当一个人这样做时:

background: linear-gradient(to right, grey 50%, yellow 2%) red;

红色仍然是背景色，但是你会看到渐变。

.box { 这个特性:50%; 宽度:200 px; 身高:200 px; 背景:线性渐变(向右，灰色50%，黄色2%)红色; ｝ {前.box:: 内容:“”; 显示:块; margin-left: 50%; 高度:50%; 边界半径:0 100% 100% 0 / 50%; transform: translateX(70px) translateY(-26px) rotate(325deg); 背景:继承; ｝ < div class = "盒子" > < / div >

现在对background-color做同样的事情:

.box { 这个特性:50%; 宽度:200 px; 身高:200 px; 背景:线性渐变(向右，灰色50%，黄色2%)红色; ｝ {前.box:: 内容:“”; 显示:块; margin-left: 50%; 高度:50%; 边界半径:0 100% 100% 0 / 50%; transform: translateX(70px) translateY(-26px) rotate(325deg); background - color:继承; ｝ < div class = "盒子" > < / div >

发生这种情况的原因是因为当我们这样做的时候:

background: linear-gradient(to right, grey 50%, yellow 2%) #red;

最后一个数字设置背景颜色。

然后在我们从background继承之前(然后我们得到渐变)或者背景颜色，然后我们得到红色。

没有区别。两者将以同样的方式工作。

CSS背景属性用于定义背景效果 一个元素。 用于背景效果的CSS属性: 背景颜色 背景图像 平铺方式 background-attachment 背景位置

Background属性包括所有这些属性，您可以将它们写在一行中。

我注意到在文档中没有看到的一件事是使用 背景:url(“image.png”)

像上面这样的简写，如果图像没有找到，它会发送一个302代码，而不是像你使用的那样被忽略

background-image: url("image.png") 

比较18个色块在一个页面上渲染100次的小 矩形，一次带有背景，一次带有background-color。

我重新创建了CSS性能实验，现在的结果明显不同。

background

Chrome 54: 443(µs/div)

Firefox 49: 162(µs/div)

边缘10:56(µs/div)

background-color

Chrome 54: 449(µs/div)

Firefox 49: 171(µs/div)

边缘10:58(µs/div)

如你所见，几乎没有区别。

假设这是两个不同的属性，在您的特定示例中，结果没有区别，因为background实际上是

背景颜色 背景图像 背景位置 平铺方式 background-attachment background-clip background-origin background-size

因此，除了background-color，使用背景简写，你还可以添加一个或多个值，而不用重复任何其他background-*属性。

选择哪一个本质上取决于你，但也可能取决于你的样式声明的特定条件(例如，如果你从父元素继承其他相关的background-*属性时只需要覆盖background-color，或者如果你需要删除除background-color之外的所有值)。

Background是以下属性的简写:

 - background-color
 - background-image
 - background-repeat
 - background-attachment
 - background-position

你可以在这里找到每一处房产的详细信息

属性的顺序

在大多数浏览器实现中(我认为可能旧浏览器会出现问题)，属性的顺序并不重要，除了:

background-origin and background-clip: when both of this properties are present, the first one refer to -origin and the second to -clip. Example: background: content-box green padding-box; Is equivalent to: background-origin: content-box; background-color: green; background-clip: padding-box; background-size must always follow background-position and the properties must be separated by / if background-position is composed by two numbers, the first one is the horizontal value and the second the vertical value.