使用background和background-color指定背景色之间的区别是什么?
片段# 1
body { background-color: blue; }
段# 2
body { background: blue; }
当前回答
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-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: url('Image Path') no-repeat;
然后你不能用"background-color"属性覆盖它。
但是如果你使用背景来应用颜色，它和background-color是一样的，并且可以被覆盖。
例如:http://jsfiddle.net/Z57Za/11/和http://jsfiddle.net/Z57Za/12/
它们都是一样的。有多个背景选择器(即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;
你可以做一些非常巧妙的事情一旦你理解了你可以利用继承。然而，首先让我们了解一下这个文档的背景:
使用CSS3，你可以为元素应用多个背景。这些都是 与你提供的第一个背景相叠加 最后一个背景列在后面。只有最后一个背景 可以包含背景色。
所以当有人这样做的时候:
background: red;
他将背景色设置为红色，因为红色是最后列出的值。
当一个人这样做时:
background: linear-gradient(to right, grey 50%, yellow 2%) red;
红色仍然是背景色，但是你会看到渐变。
.box { 这个特性:50%; 宽度:200 px; 身高:200 px; 背景:线性渐变(向右，灰色50%，黄色2%)红色; ｝ {前.box:: 内容:“”; 显示:块; margin-left: 50%; 高度:50%; 边界半径:0 100% 100% 0 / 50%; transform: translateX(70px) translateY(-26px) rotate(325deg); 背景:继承; ｝ < div class = "盒子" > < / div >
现在对background-color做同样的事情:
.box { 这个特性:50%; 宽度:200 px; 身高:200 px; 背景:线性渐变(向右，灰色50%，黄色2%)红色; ｝ {前.box:: 内容:“”; 显示:块; margin-left: 50%; 高度:50%; 边界半径:0 100% 100% 0 / 50%; transform: translateX(70px) translateY(-26px) rotate(325deg); background - color:继承; ｝ < div class = "盒子" > < / div >
发生这种情况的原因是因为当我们这样做的时候:
background: linear-gradient(to right, grey 50%, yellow 2%) #red;
最后一个数字设置背景颜色。
然后在我们从background继承之前(然后我们得到渐变)或者背景颜色，然后我们得到红色。
关于CSS性能:
背景vs Background -color:
比较18个色块在一个页面上渲染100次的小 矩形，一次带有背景，一次带有background-color。
While these numbers are from a single page reload, with subsequent refreshes the render times changed, but the percent difference was basically the same every time. That's a savings of almost 42.6ms, almost twice as fast, when using background instead of background-color in Safari 7.0.1. Chrome 33 appears to be about the same. This honestly blew me away because for the longest time for two reasons: I usually always argue for explicitness in CSS properties, especially with backgrounds because it can adversely affect specificity down the road. I thought that when a browser sees background: #000;, they really see background: #000 none no-repeat top center;. I don't have a link to a resource here, but I recall reading this somewhere.
参考:https://github.com/mdo/css-perf#background-vs-background-color
