使用background和background-color指定背景色之间的区别是什么?
片段# 1
body { background-color: blue; }
段# 2
body { background: blue; }
使用background和background-color指定背景色之间的区别是什么?
片段# 1
body { background-color: blue; }
段# 2
body { background: blue; }
当前回答
我注意到在文档中没有看到的一件事是使用 背景: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));
使用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;
更多信息
(见说明:背景-速记属性)
背景将取代所有以前的背景颜色,背景图像等规格。这基本上是一种速记,但也是一种重置。
我有时会用它来覆盖以前的模板定制的背景规范,在那里我想要以下:
背景:白色url(images/image1.jpg)左上角重复;
以下是:
背景:黑色;
因此,所有参数(background-image, background-position, background-repeat)将重置为默认值。
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 背景位置 如果缺少一个属性值,这并不重要 其他的都是这个顺序。