关于CSS性能:

背景vs Background -color:

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

While these numbers are from a single page reload, with subsequent refreshes the render times changed, but the percent difference was basically the same every time. That's a savings of almost 42.6ms, almost twice as fast, when using background instead of background-color in Safari 7.0.1. Chrome 33 appears to be about the same. This honestly blew me away because for the longest time for two reasons: I usually always argue for explicitness in CSS properties, especially with backgrounds because it can adversely affect specificity down the road. I thought that when a browser sees background: #000;, they really see background: #000 none no-repeat top center;. I don't have a link to a resource here, but I recall reading this somewhere.

参考:https://github.com/mdo/css-perf#background-vs-background-color

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

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

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

Background是背景颜色和其他一些背景相关的东西的快捷方式，如下所示:

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

阅读下面来自W3C的声明:

背景-速记属性用于缩短代码 也可以指定所有的背景属性在一个单一 财产。这被称为速记属性。 background的简写属性是background:

body {
  background: white url("img_tree.png") no-repeat right top;
}

当使用速记属性时，属性值的顺序是:

背景颜色 背景图像 平铺方式 background-attachment 背景位置 如果缺少一个属性值，这并不重要 其他的都是这个顺序。

我注意到，当为Outlook生成电子邮件时……

/*works*/
background: gray;

/*does not work*/
background-color: gray;

比较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)

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

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

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

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