如何用另一个 CSS 覆盖 CSS 中定义的背景图像？
我有一个“Core.css”，它定义了网站的页面背景图像以及主题。但对于特定页面，我只想更改背景。关于如何在单独的 CSS 文件中实现这一点有什么建议吗？
该页面的 HTML 为：
<head>
<link rel="stylesheet" type="text/css" href="core.css" />
<link rel="stylesheet" type="text/css" href="index.css" />
core.css 定义：
body
{
background-image: url('bg.png');
}
而 index.css 定义：
body
{
background-image:('homeBg.png');
}
谢谢！
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
如果您想将背景图像替换为空（即使其不活动或“将其关闭”），请在下游样式表中使用“none”关键字：
If you want to replace the background image with nothing (i.e. make it inactive or "turn it off"), use the "none" keyword in your downstream style sheet:
后面定义的背景应该取代前面的背景。因此，如果您有：
Site1.css 其中有：
Site2.css 其中有：
那么如果 Site2.css 包含在页面上的 Site1.css 之后，则 Site2.css .img 将替换 Site1.css 中的 .img。
更新：我不确定为什么正文标签没有被正确替换。你能尝试给它一个类或id，并用它代替body吗？
例如
，然后在 css 文件中执行
#backgroundTest { background-image... }以防万一，您可以检查 homeBg.png 是否存在以及 index.css 是否存在。 http://yourpage.com/homeBg.png 和 http://yourpage.com/index.css 应该都存在。
background defined later should replace the previous ones. So if you have:
Site1.css which has:
Site2.css which has:
then Site2.css .img would replace .img within Site1.css if Site2.css is included after Site1.css on your page.
UPDATE: I'm not sure why the body tag is not being replaced correctly. Could you try to give it a class or id, and use that instead of body?
e.g.
And then in the css files you would do
#backgroundTest { background-image... }And just in case, could you check if homeBg.png exists and index.css. http://yourpage.com/homeBg.png and http://yourpage.com/index.css should both exist.
对于特定页面，您可以在页面中使用 css 规则，使用
!重要。如果您在文件中添加your-selector {background: url("the-path-for-the-bg-image") no-repeat !important;}，将覆盖默认背景。For the specific page you can use a css rule in the page, using
!important. If you addyour-selector {background: url("the-path-for-the-bg-image") no-repeat !important;}in the file, will override the default background.在index.css写入中，
您可以通过在新文件中在其后写入“！important”来覆盖任何地方定义的任何属性
in index.css write
you can override any property defined anywhere by writing "!important" after it in new file
使用与原始规则相同的选择器在 CSS 规则中设置背景，并在原始规则之后包含新的 CSS 文件，或者确保新规则具有更高特异性的选择器： http://www.w3.org/TR/CSS2/cascade.html#specificity
最后你可以为背景属性赋予
!important标志，但这通常是最后的手段，也是样式表组织不良的标志。Either set the background in a CSS rule with the same selector as the original rule, and include your new CSS file after the original one, or make sure your new rule has a selector which has a higher specificity: http://www.w3.org/TR/CSS2/cascade.html#specificity
Finally you could give the background property the
!importantflag, however that is usually a last resort and the sign of a badly organized style sheet.如果页面背景是在正文中设置的，您可以简单地通过为该特定页面中的正文提供类或 id 并添加（也可以在同一个 css 文件中...）来否决它：
或
（在 < code>body 部分并不是真正需要的，因为类和 id 推翻了选择器）
If the page background is set in the body, you can simply overrule it by giving the body in that specific page a class or an id and add (can also be in the same css file...):
or
(in both the
bodypart is not really needed as the class and the id overrule the selector)我也有同样的问题。
我最终所做的是在我的样式表中进行覆盖，我不仅将其应用于正文，html：
所以...
希望这可以帮助某人。
I had the same problem.
What I ended up doing was in my stylesheet which was doing the override, I applied it to not only body, html:
So...
Hope this might help someone.