使用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)

如你所见,几乎没有区别。

其他回答

我注意到在文档中没有看到的一件事是使用 背景:url(“image.png”)

像上面这样的简写,如果图像没有找到,它会发送一个302代码,而不是像你使用的那样被忽略

background-image: url("image.png") 

背景将取代所有以前的背景颜色,背景图像等规格。这基本上是一种速记,但也是一种重置。

我有时会用它来覆盖以前的模板定制的背景规范,在那里我想要以下:

背景:白色url(images/image1.jpg)左上角重复;

以下是:

背景:黑色;

因此,所有参数(background-image, background-position, background-repeat)将重置为默认值。

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/

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

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