背景和背景有什么区别-颜色

Question

使用background指定背景颜色和background-Color指定背景颜色有什么区别？

片段#1

body { background-color: blue; }

片段#2

body { background: blue; }

Answer 1

关于CSS性能：

backgroundvsbackground color：

比较18个色板在页面上呈现100次为小矩形，一次带有背景，一次带有背景颜色。

虽然这些数字来自单页重新加载，但随着后续刷新，呈现时间会发生变化，但每次的百分比差异基本相同。

在Safari 7.0.1中使用背景色而不是背景色时，可以节省将近42.6ms，速度几乎是原来的两倍。Chrome 33似乎也差不多。

这真的让我大吃一惊，因为在最长的一段时间里，有两个原因：

• 我通常主张CSS属性的明确性，尤其是在背景中，因为这可能会对特定性产生负面影响
• 我认为当浏览器看到背景时：#000 ，他们真的看到了背景：#000无无重复顶部中心 。我在这里没有资源链接，但我记得在某个地方读过这篇文章

参考：https://github.com/mdo/css-perf#background-vs-background-color

Answer 2

背景将取代之前所有的背景色、背景图像等规格。这基本上是一个速记，但也是一个重置。

我有时会使用它来覆盖模板自定义中以前的background规范，其中我想要以下内容：

背景：白色url（images/image1.jpg）左上角重复

具体如下：

背景：黑色

所以，所有的参数（background-Image，background-place，background-重复）将重置为默认值。

Answer 3

假设这是两个不同的属性，在您的特定示例中，结果没有区别，因为background实际上是

background-color  
background-image  
background-position  
background-repeat  
background-attachment  
background-clip  
background-origin  
background-size

因此，除了背景色，使用背景速记，您还可以添加一个或多个值，而无需多次重复任何其他背景-*属性。

选择哪一个基本上取决于你，但它也可能取决于你的样式声明的特定条件（例如，当从父元素继承其他相关的背景-*属性时，如果你只需要覆盖背景-颜色，或者，如果您需要删除除背景颜色之外的所有值）。