CSS 背景色和背景色有什么区别

What is the difference between background and background-color

提问by stanigator

What's the difference between specifying a background color using backgroundand background-color?

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

Snippet #1

片段 #1

body { background-color: blue; }

Snippet #2

片段 #2

body { background: blue; }

采纳答案by Fabrizio Calderan

Premising that those are two distinct properties, in your specific example there's no difference in the result, since backgroundactually is a shorthand for

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

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

背景颜色
背景图像
背景位置
背景重复
背景附件
背景剪辑
背景原点
背景大小

Thus, besides the background-color, using the backgroundshortcut you could also add one or more values without repeating any other background-*property more than once.

因此，除了background-color，使用background快捷方式您还可以添加一个或多个值，而无需多次重复任何其他 background-*属性。

Which one to choose is essentially up to you, but it could also depend on specific conditions of your style declarations (e.g if you need to override just the background-colorwhen inheriting other related background-*properties from a parent element, or if you need to remove all the values except the background-color).

选择哪一个基本上取决于您，但它也可能取决于您的样式声明的特定条件（例如，如果您需要在从父元素background-color继承其他相关background-*属性时仅覆盖，或者如果您需要删除所有值除了background-color)。

回答by Anri?tte Myburgh

backgroundwill supercede all previous background-color, background-image, etc. specifications. It's basically a shorthand, but a resetas well.

background将取代所有之前的background-color，background-image等规格。它基本上是一个速记，但也是一个重置。

I will sometimes use it to overwrite previous backgroundspecifications in template customizations, where I would want the following:

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

background: white url(images/image1.jpg) top left repeat;

background: white url(images/image1.jpg) top left repeat;

to be the following:

如下：

background: black;

background: black;

So, all parameters (background-image, background-position, background-repeat) will reset to their default values.

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

回答by l2aelba

About CSS performance:

关于CSS 性能：

backgroundvs background-color:

background对比background-color：

Comparison of 18 color swatches rendered 100 times on a page as small rectangles, once with backgroundand once with 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.

虽然这些数字来自单个页面重新加载，随后的刷新渲染时间发生了变化，但每次的百分比差异基本相同。

在 Safari 7.0.1 中使用 background 而不是 background-color 时，这几乎节省了 42.6 毫秒，几乎快了两倍。Chrome 33 似乎大致相同。

老实说，这让我大吃一惊，因为最长的时间有两个原因：

• 我通常总是主张 CSS 属性的明确性，尤其是背景，因为它会对未来的特异性产生不利影响。
• 我认为当浏览器看到时background: #000;，他们真的看到了background: #000 none no-repeat top center;。我这里没有资源链接，但我记得在某处读过这个。

Ref :https://github.com/mdo/css-perf#background-vs-background-color

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

回答by alphanyx

With backgroundyou can set all backgroundproperties like:

有了background你可以设置所有background的属性，如：

• background-color
• background-image
  
• background-repeat
  
• background-position
  etc.

• background-color
• background-image
  
• background-repeat
  
• background-position
  等等。

---

---

With background-coloryou can just specify the color of the 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;

---

---

More info

更多信息

(See Caption: Background - Shorthand property)

（参见标题：背景 - 速记属性）

回答by Ankit

One of the difference:

区别之一：

If you use a image as background in this way:

如果您以这种方式使用图像作为背景：

background: url('Image Path') no-repeat;

then you cannot override it with "background-color" property.

那么你不能用“背景颜色”属性覆盖它。

But if you are using background to apply a color, it is same as background-color and can be overriden.

但是如果你使用 background 来应用颜色，它与 background-color 相同并且可以被覆盖。

eg: http://jsfiddle.net/Z57Za/11/and http://jsfiddle.net/Z57Za/12/

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

回答by Jukka K. Korpela

The difference is that the backgroundshorthand property sets several background-related properties. It sets them all, even if you only specify e.g. a color value, since then the other properties are set to their initial values, e.g. background-imageto none.

不同之处在于background速记属性设置了几个与背景相关的属性。它将它们全部设置，即使您只指定例如一个颜色值，因为其他属性被设置为它们的初始值，例如background-imageto none。

This does not mean that it would always override any other settings for those properties. This depends on the cascade according to the usual, generally misunderstood rules.

这并不意味着它总是会覆盖这些属性的任何其他设置。这取决于根据通常的、通常被误解的规则的级联。

In practice, the shorthand tends to be somewhat safer. It is a precaution (not complete, but useful) against accidentally getting some unexpected background properties, such as a background image, from another style sheet. Besides, it's shorter. But you need to remember that it really means “set all background properties”.

在实践中，速记往往更安全一些。这是一种预防措施（不完整，但很有用），可以防止意外地从另一个样式表中获取一些意外的背景属性，例如背景图像。此外，它更短。但是你需要记住它的真正意思是“设置所有背景属性”。

回答by HellaMad

They're both the same. There are multiple background selectors (i.e. background-color, background-image, background-position) and you can access them either through the simpler backgroundselector or the more specific one. For example:

他们都是一样的。有多个背景选择器（即background-color、background-image、background-position），您可以通过更简单的background选择器或更具体的选择器访问它们。例如：

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

or

或者

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

回答by Chuck Norris

There is no difference.Both will work in the same way.

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

CSS background properties are used to define the background effects of an element.

CSS properties used for background effects:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

CSS 背景属性用于定义元素的背景效果。

用于背景效果的 CSS 属性：

• 背景颜色
• 背景图片
• 背景重复
• 背景附件
• 背景位置

Background property includes all of this properties and you can just write them in one line.

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

回答by Jonh Doe

This is the best answer. Shorthand (background) is for reset and DRY (combine with longhand).

这是最好的答案。速记（背景）用于重置和 DRY（与速记结合）。

回答by Marcin Biernacki

Comparison of 18 color swatches rendered 100 times on a page as small rectangles, once with background and once with background-color.

将 18 个色样在页面上作为小矩形渲染 100 次的比较，一次带有背景，一次带有背景颜色。

I recreated the CSS performanceexperiment and the results are significantly different nowadays.

我重新创建了CSS 性能实验，现在的结果明显不同。

background

Chrome 54: 443 (μs/div)

铬 54：443（微秒/格）

Firefox 49: 162 (μs/div)

火狐 49：162（微秒/格）

Edge 10: 56 (μs/div)

边缘 10: 56 (μs/div)

background-color

Chrome 54: 449 (μs/div)

铬 54：449（微秒/格）

Firefox 49: 171 (μs/div)

火狐 49：171（微秒/格）

Edge 10: 58 (μs/div)

边缘 10: 58 (μs/div)

As you see - there's almost no difference.

如您所见 - 几乎没有区别。