使用background和background-color指定背景色之间的区别是什么?
片段# 1
body { background-color: blue; }
段# 2
body { background: blue; }
使用background和background-color指定背景色之间的区别是什么?
片段# 1
body { background-color: blue; }
段# 2
body { background: blue; }
当前回答
它们都是一样的。有多个背景选择器(即background-color, background-image, background-position),你可以通过更简单的背景选择器或更具体的背景选择器访问它们。例如:
background: blue url(/myImage.jpg) no-repeat;
or
background-color: blue;
background-image: url(/myImage.jpg);
background-repeat: no-repeat;
其他回答
它们都是一样的。有多个背景选择器(即background-color, background-image, background-position),你可以通过更简单的背景选择器或更具体的背景选择器访问它们。例如:
background: blue url(/myImage.jpg) no-repeat;
or
background-color: blue;
background-image: url(/myImage.jpg);
background-repeat: no-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;
更多信息
(见说明:背景-速记属性)
比较18个色块在一个页面上渲染100次的小 矩形,一次带有背景,一次带有background-color。
我重新创建了CSS性能实验,现在的结果明显不同。
background
Chrome 54: 443(µs/div)
Firefox 49: 162(µs/div)
边缘10:56(µs/div)
background-color
Chrome 54: 449(µs/div)
Firefox 49: 171(µs/div)
边缘10:58(µs/div)
如你所见,几乎没有区别。
我注意到,当为Outlook生成电子邮件时……
/*works*/
background: gray;
/*does not work*/
background-color: gray;
这是最好的答案。速记(背景)是为了重置和干燥(与手写结合)。