使用background和background-color指定背景色之间的区别是什么?
片段# 1
body { background-color: blue; }
段# 2
body { background: blue; }
使用background和background-color指定背景色之间的区别是什么?
片段# 1
body { background-color: blue; }
段# 2
body { background: blue; }
当前回答
不同之处在于背景速记属性设置了几个与背景相关的属性。它会设置所有属性,即使你只指定了一个颜色值,因为其他属性被设置为它们的初始值,例如background-image为none。
这并不意味着它总是会覆盖这些属性的任何其他设置。这取决于通常被误解的规则下的级联。
在实践中,速记往往更安全一些。这是一种预防措施(不完全,但很有用),可以防止意外地从另一个样式表获得一些意外的背景属性,例如背景图像。此外,它更短。但是你需要记住它的意思是“设置所有的背景属性”。
其他回答
假设这是两个不同的属性,在您的特定示例中,结果没有区别,因为background实际上是
背景颜色 背景图像 背景位置 平铺方式 background-attachment background-clip background-origin background-size
因此,除了background-color,使用背景简写,你还可以添加一个或多个值,而不用重复任何其他background-*属性。
选择哪一个本质上取决于你,但也可能取决于你的样式声明的特定条件(例如,如果你从父元素继承其他相关的background-*属性时只需要覆盖background-color,或者如果你需要删除除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是背景颜色和其他一些背景相关的东西的快捷方式,如下所示:
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 背景位置 如果缺少一个属性值,这并不重要 其他的都是这个顺序。
其中一个区别是:
如果你以这种方式使用图像作为背景:
background: url('Image Path') no-repeat;
然后你不能用"background-color"属性覆盖它。
但是如果你使用背景来应用颜色,它和background-color是一样的,并且可以被覆盖。
例如:http://jsfiddle.net/Z57Za/11/和http://jsfiddle.net/Z57Za/12/
不同之处在于背景速记属性设置了几个与背景相关的属性。它会设置所有属性,即使你只指定了一个颜色值,因为其他属性被设置为它们的初始值,例如background-image为none。
这并不意味着它总是会覆盖这些属性的任何其他设置。这取决于通常被误解的规则下的级联。
在实践中,速记往往更安全一些。这是一种预防措施(不完全,但很有用),可以防止意外地从另一个样式表获得一些意外的背景属性,例如背景图像。此外,它更短。但是你需要记住它的意思是“设置所有的背景属性”。