比较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-color设置渐变。

如此:

background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

这不是:

background-color:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

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

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

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

这是最好的答案。速记(背景)是为了重置和干燥(与手写结合)。

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

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

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

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

不同之处在于背景速记属性设置了几个与背景相关的属性。它会设置所有属性，即使你只指定了一个颜色值，因为其他属性被设置为它们的初始值，例如background-image为none。

这并不意味着它总是会覆盖这些属性的任何其他设置。这取决于通常被误解的规则下的级联。

在实践中，速记往往更安全一些。这是一种预防措施(不完全，但很有用)，可以防止意外地从另一个样式表获得一些意外的背景属性，例如背景图像。此外，它更短。但是你需要记住它的意思是“设置所有的背景属性”。