覆盖的CSS属性是被取消还是被覆盖?

本文介绍了覆盖的CSS属性是被取消还是被覆盖?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我的意思是

如果我这样做:

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

然后在另一个样式表中

#item {background:red;}

浏览器将加载image.jpg，然后将其取消并设置为红色，还是直接变为红色? (不加载图像)

will the browser load image.jpg and then cancell it and set red, or will go straight to red? (without loading the image)

谢谢！

推荐答案

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

It will do both, since those two statements are the same as

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

或

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

在两种情况下，背景都会有图像，并且item元素的整个区域都将显示为红色.因此，不透明的图像(例如具有透明性的.png)也将在透明区域中也用红色填充.

In both cases, the background will have an image, and the entire area of the item element in red. So an opaque image, like a .png with transparency, would for instance be filled with red in the transparent areas as well.

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

However, as the script parses the CSS in a cascading fashion,

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

它将加载"anotherimage"，而忽略另一个. 在CSS完成编译并确定特异性.换句话说，第一个图像被覆盖，因此从不请求.

it will load "anotherimage" and ignore the other one. The request isn't sent until the CSS is done compiling and determined the order of specificity. In other words, the first image is overridden, and is therefore never requested.

背景"实际上是一个简短的属性，例如边界"，它将所有不同的属性组合到一个语句中. 这是关于'background'属性的链接，向下滚动，您可以阅读它

The 'background' is actually a short hand property, like 'border', combining all of the different properties into a single statement. Here is a link about the 'background' property, scroll down and you can read about it.