使用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-image为none。
这并不意味着它总是会覆盖这些属性的任何其他设置。这取决于通常被误解的规则下的级联。
在实践中,速记往往更安全一些。这是一种预防措施(不完全,但很有用),可以防止意外地从另一个样式表获得一些意外的背景属性,例如背景图像。此外,它更短。但是你需要记住它的意思是“设置所有的背景属性”。
假设这是两个不同的属性,在您的特定示例中,结果没有区别,因为background实际上是
背景颜色 背景图像 背景位置 平铺方式 background-attachment background-clip background-origin background-size
因此,除了background-color,使用背景简写,你还可以添加一个或多个值,而不用重复任何其他background-*属性。
选择哪一个本质上取决于你,但也可能取决于你的样式声明的特定条件(例如,如果你从父元素继承其他相关的background-*属性时只需要覆盖background-color,或者如果你需要删除除background-color之外的所有值)。
比较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.
背景将取代所有以前的背景颜色,背景图像等规格。这基本上是一种速记,但也是一种重置。
我有时会用它来覆盖以前的模板定制的背景规范,在那里我想要以下:
背景:白色url(images/image1.jpg)左上角重复;
以下是:
背景:黑色;
因此,所有参数(background-image, background-position, background-repeat)将重置为默认值。