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

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

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

你可以做一些非常巧妙的事情一旦你理解了你可以利用继承。然而，首先让我们了解一下这个文档的背景:

使用CSS3，你可以为元素应用多个背景。这些都是 与你提供的第一个背景相叠加 最后一个背景列在后面。只有最后一个背景 可以包含背景色。

所以当有人这样做的时候:

background: red;

他将背景色设置为红色，因为红色是最后列出的值。

当一个人这样做时:

background: linear-gradient(to right, grey 50%, yellow 2%) red;

红色仍然是背景色，但是你会看到渐变。

.box { 这个特性:50%; 宽度:200 px; 身高:200 px; 背景:线性渐变(向右，灰色50%，黄色2%)红色; ｝ {前.box:: 内容:“”; 显示:块; margin-left: 50%; 高度:50%; 边界半径:0 100% 100% 0 / 50%; transform: translateX(70px) translateY(-26px) rotate(325deg); 背景:继承; ｝ < div class = "盒子" > < / div >

现在对background-color做同样的事情:

.box { 这个特性:50%; 宽度:200 px; 身高:200 px; 背景:线性渐变(向右，灰色50%，黄色2%)红色; ｝ {前.box:: 内容:“”; 显示:块; margin-left: 50%; 高度:50%; 边界半径:0 100% 100% 0 / 50%; transform: translateX(70px) translateY(-26px) rotate(325deg); background - color:继承; ｝ < div class = "盒子" > < / div >

发生这种情况的原因是因为当我们这样做的时候:

background: linear-gradient(to right, grey 50%, yellow 2%) #red;

最后一个数字设置背景颜色。

然后在我们从background继承之前(然后我们得到渐变)或者背景颜色，然后我们得到红色。

其中一个区别是:

如果你以这种方式使用图像作为背景:

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

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

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

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

它们都是一样的。有多个背景选择器(即background-color, background-image, background-position)，你可以通过更简单的背景选择器或更具体的背景选择器访问它们。例如:

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

or

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

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

/*works*/
background: gray;

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

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

更多信息

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