被覆盖的css属性是否被取消或被覆盖？

Question

我的意思是，

如果我这样做：

#item { background:url('image.jpg');}

然后在另一个样式表中

#item {background:red;}

浏览器会加载image.jpg，然后取消它并设置为红色，或者直接变为红色？ （不加载图片）

谢谢！

Answer 1

在这种特定情况下，浏览器应加载图像并同时应用红色，因为这两个定义并不真正重叠。这就像分别设置属性“background-color”和“background-image”一样。这是有意义的，因为可能有一些背景图像和更大元素的其余部分的红色背景。

一般而言，定义被覆盖，具体取决于所谓的特异性。有关http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

的更多信息，请查看此页面

Answer 2

它将同时执行这两个操作，因为这两个语句与

相同

#item { background: red url('image.jpg'); }

或

#item { background-color: red; }
#item { background-image: url('image.jpg'); }

在这两种情况下，背景都会有一个图像，而item元素的整个区域都是红色的。因此，不透明的图像，例如具有透明度的.png，也会在透明区域中用红色填充。

但是，当脚本以级联方式解析CSS时，

#item { background: url('image.jpg'); }
#item { background: url('anotherimage.jpg'); }

它将加载“anotherimage”并忽略另一个。 在完成CSS编译并确定specificity的顺序之前，不会发送请求。换句话说，第一个图像被覆盖，因此永远不会被请求。

'background'实际上是一个简短的属性，比如'border'，将所有不同的属性组合成一个语句。 这是关于“背景”属性的link，向下滚动，您可以阅读它。