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

片段# 1

body { background-color: blue; }

段# 2

body { background: blue; }

当前回答

Background是以下属性的简写:

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

你可以在这里找到每一处房产的详细信息

属性的顺序

在大多数浏览器实现中(我认为可能旧浏览器会出现问题),属性的顺序并不重要,除了:

background-origin and background-clip: when both of this properties are present, the first one refer to -origin and the second to -clip. Example: background: content-box green padding-box; Is equivalent to: background-origin: content-box; background-color: green; background-clip: padding-box; background-size must always follow background-position and the properties must be separated by / if background-position is composed by two numbers, the first one is the horizontal value and the second the vertical value.

其他回答

我发现你不能用background-color设置渐变。

如此:

background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

这不是:

background-color:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

背景将取代所有以前的背景颜色,背景图像等规格。这基本上是一种速记,但也是一种重置。

我有时会用它来覆盖以前的模板定制的背景规范,在那里我想要以下:

背景:白色url(images/image1.jpg)左上角重复;

以下是:

背景:黑色;

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

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

更多信息

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

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

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

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

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

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

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