使用background和background-color指定背景色之间的区别是什么?

片段# 1

body { background-color: blue; }

段# 2

body { background: blue; }

当前回答

这是最好的答案。速记(背景)是为了重置和干燥(与手写结合)。

其他回答

它们都是一样的。有多个背景选择器(即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;

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

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

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

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

更多信息

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

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

/*works*/
background: gray;

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

其中一个区别是:

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

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

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

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

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