使用background和background-color指定背景色之间的区别是什么?
片段# 1
body { background-color: blue; }
段# 2
body { background: blue; }
当前回答
我注意到在文档中没有看到的一件事是使用 背景:url(“image.png”)
像上面这样的简写，如果图像没有找到，它会发送一个302代码，而不是像你使用的那样被忽略
background-image: url("image.png")
其他回答
我注意到在文档中没有看到的一件事是使用 背景:url(“image.png”)
像上面这样的简写，如果图像没有找到，它会发送一个302代码，而不是像你使用的那样被忽略
background-image: url("image.png")
不同之处在于背景速记属性设置了几个与背景相关的属性。它会设置所有属性，即使你只指定了一个颜色值，因为其他属性被设置为它们的初始值，例如background-image为none。
这并不意味着它总是会覆盖这些属性的任何其他设置。这取决于通常被误解的规则下的级联。
在实践中，速记往往更安全一些。这是一种预防措施(不完全，但很有用)，可以防止意外地从另一个样式表获得一些意外的背景属性，例如背景图像。此外，它更短。但是你需要记住它的意思是“设置所有的背景属性”。
比较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: url('Image Path') no-repeat;
然后你不能用"background-color"属性覆盖它。
但是如果你使用背景来应用颜色，它和background-color是一样的，并且可以被覆盖。
例如:http://jsfiddle.net/Z57Za/11/和http://jsfiddle.net/Z57Za/12/
这是最好的答案。速记(背景)是为了重置和干燥(与手写结合)。
