有一个关于背景和背景颜色的错误

这个的区别， 当使用后台时，有时当你创建网页时 在CSS中 background: #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));

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

使用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;

更多信息

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

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

/*works*/
background: gray;

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