What is the difference between background and background color

在CSS中，background和background-color是两个有着不同用途的属性。

background-color属性用于设置一个元素的背景颜色。它可以接受各种颜色值，比如颜色关键字、十六进制颜色代码、RGB或RGBA值、HSL或HSLA值等。例如：

css
div {
  background-color: #ff0000; /* 设置背景颜色为红色 */
}

另一方面，background是一个复合属性，它可以同时设置多个背景相关的属性值，包括background-color、background-image、background-repeat、background-position和background-size等。使用background属性可以让你一次性设置所有这些背景属性。例如：

css
div {
  background: #ff0000 url('image.jpg') no-repeat center center / cover;
}

在上面的例子中，#ff0000设置了背景颜色，url('image.jpg')设置了背景图片，no-repeat指定图片不重复，center center指定了图片的位置，而/ cover则指定背景图片覆盖整个元素的区域。

使用background属性是一种简写方式，它可以减少代码的冗余性并提供更为清晰的代码。不过，有时我们只需要设置背景颜色，这时使用background-color更为直接和简单。另外，如果我们想要分别修改背景的某个特定属性，而不影响其他背景属性，使用单独的属性如background-color、background-image等更合适。

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

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

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

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

background将取代所有以前的background-color、background-image等规格。它基本上是一个简写，但也是一个重置。

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

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

如下：

background: black;

因此，所有参数（background-image、background-position、background-repeat）将重置为其默认值。

关于CSS 性能：

background对比background-color：

比较在页面上以小矩形形式渲染 100 次的 18 个色样，一次使用背景，一次使用背景颜色。

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

在 Safari 7.0.1 中使用背景而不是背景颜色时**，节省了近 42.6 毫秒，几乎是速度的两倍**。 Chrome 33 似乎也差不多。

老实说，这让我震惊，因为在很长一段时间里有两个原因：

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

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

区别之一：

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

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

那么你不能用“background-color”属性覆盖它。

但如果您使用背景来应用颜色，则它与背景颜色相同并且可以被覆盖。

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