使用background和background-color指定背景色之间的区别是什么?

片段# 1

body { background-color: blue; }

段# 2

body { background: blue; }

当前回答

不同之处在于背景速记属性设置了几个与背景相关的属性。它会设置所有属性,即使你只指定了一个颜色值,因为其他属性被设置为它们的初始值,例如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-color, background-image, background-position),你可以通过更简单的背景选择器或更具体的背景选择器访问它们。例如:

background: blue url(/myImage.jpg) no-repeat;

or

background-color: blue;
background-image: url(/myImage.jpg);
background-repeat: no-repeat;

使用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-image为none。

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

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

我注意到在文档中没有看到的一件事是使用 背景:url(“image.png”)

像上面这样的简写,如果图像没有找到,它会发送一个302代码,而不是像你使用的那样被忽略

background-image: url("image.png")