关于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，你可以设置所有的背景属性，比如:

背景颜色 背景图像 平铺方式 背景位置 等。

使用background-color，你可以指定背景的颜色

background: url(example.jpg) no-repeat center center #fff;

VS.

background-image: url(example.jpg);
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;

更多信息

(见说明:背景-速记属性)

我发现你不能用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属性包括所有这些属性，您可以将它们写在一行中。

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

/*works*/
background: gray;

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