background和background-color的区别是什么

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

片段# 1

body { background-color: blue; }

段# 2

body { background: blue; }

当前回答

比较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: url('Image Path') no-repeat;

然后你不能用"background-color"属性覆盖它。

但是如果你使用背景来应用颜色，它和background-color是一样的，并且可以被覆盖。

例如:http://jsfiddle.net/Z57Za/11/和http://jsfiddle.net/Z57Za/12/

没有区别。两者将以同样的方式工作。

CSS背景属性用于定义背景效果一个元素。用于背景效果的CSS属性: 背景颜色背景图像平铺方式 background-attachment 背景位置

Background属性包括所有这些属性，您可以将它们写在一行中。

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-color设置渐变。

如此:

background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

这不是:

background-color:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

有一个关于背景和背景颜色的错误

这个的区别，当使用后台时，有时当你创建网页时在CSS中 background: #fff //可以覆盖蒙版图像块(“顶部项目，文本或图像”)) 所以最好总是使用背景色为了安全起见，在你的设计中，如果它是单独的

推荐文章