background和background-color的区别是什么

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

片段# 1

body { background-color: blue; }

段# 2

body { background: blue; }

当前回答

我发现你不能用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));

其他回答

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

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

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

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

背景颜色背景图像背景位置平铺方式 background-attachment background-clip background-origin background-size

因此，除了background-color，使用背景简写，你还可以添加一个或多个值，而不用重复任何其他background-*属性。

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

我发现你不能用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));

其中一个区别是:

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

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

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

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

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

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

更多信息

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

推荐文章