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-color, background-image, background-position)，你可以通过更简单的背景选择器或更具体的背景选择器访问它们。例如:

background: blue url(/myImage.jpg) no-repeat;

background-color: blue;
background-image: url(/myImage.jpg);
background-repeat: no-repeat;

使用background，你可以设置所有的背景属性，比如:

背景颜色背景图像平铺方式背景位置等。

使用background-color，你可以指定背景的颜色

background: url(example.jpg) no-repeat center center #fff;

VS.

background-image: url(example.jpg);
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;

更多信息

(见说明:背景-速记属性)

比较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(images/image1.jpg)左上角重复;

以下是:

背景:黑色;

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

我注意到，当为Outlook生成电子邮件时……

/*works*/
background: gray;

/*does not work*/
background-color: gray;

推荐文章