覆盖的CSS属性是被取消还是被覆盖? [英] Are overriden css properties cancelled or just overriden?

问题描述

我的意思是

如果我这样做:

#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.

这篇关于覆盖的CSS属性是被取消还是被覆盖?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！