被覆盖的CSS属性是被取消还是只是被覆盖？

发布于 2024-12-04 17:03:35 字数 233 浏览 2 评论 0 原文

我的意思是，

如果我这样做：

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

然后在另一个样式表中我这样做，

#item {background:red;}

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

谢谢！

原文

I mean,

If i do:

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

and then in another stylesheet i do

#item {background:red;}

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

thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

仅冇旳回忆 2024-12-11 17:03:35

在这种特定情况下，浏览器应该加载图像并同时应用红色，因为这两个定义实际上并不重叠。这就像单独设置属性“背景颜色”和“背景图像”。这是有道理的，因为较大元素的其余部分可能有一个小背景图像和红色背景。

不过，一般来说，定义会被覆盖，具体取决于所谓的特异性。查看此页面以了解有关 http:// /coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

回复收藏 0 原文

烧了回忆取暖 2024-12-11 17:03:35

相同。

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

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

#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 完成编译并确定特异性。换句话说，第一个图像被覆盖，因此永远不会被请求。

“背景”实际上是一个简写属性，就像“边框”一样，将所有不同的属性组合到一个语句中。
这是关于“background”属性的链接，向下滚动，您可以阅读它。

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'); }

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.

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

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

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.

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.

回复收藏 0 原文

~没有更多了~