background和background-color的区别是什么

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

片段# 1

body { background-color: blue; }

段# 2

body { background: blue; }

当前回答

有一个关于背景和背景颜色的错误

这个的区别，当使用后台时，有时当你创建网页时在CSS中 background: #fff //可以覆盖蒙版图像块(“顶部项目，文本或图像”)) 所以最好总是使用背景色为了安全起见，在你的设计中，如果它是单独的

其他回答

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

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

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

其中一个区别是:

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

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

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

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

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

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

/*works*/
background: gray;

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

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

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

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

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

推荐文章