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));

其他回答

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

更多信息

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

Background是背景颜色和其他一些背景相关的东西的快捷方式，如下所示:

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

阅读下面来自W3C的声明:

背景-速记属性用于缩短代码也可以指定所有的背景属性在一个单一财产。这被称为速记属性。 background的简写属性是background:

body {
  background: white url("img_tree.png") no-repeat right top;
}

当使用速记属性时，属性值的顺序是:

背景颜色背景图像平铺方式 background-attachment 背景位置如果缺少一个属性值，这并不重要其他的都是这个顺序。

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

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

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

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

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

推荐文章