如何用另一个 CSS 覆盖 CSS 中定义的背景图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4805075/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to override background image defined in CSS with another CSS?
提问by aateeque
I have a 'Core.css' which defines a page background image, along with the theme, for the site. But for a specific page I want to change just the background. Any suggestions on how this can be achieved in a separate CSS file?
我有一个“Core.css”，它为站点定义了页面背景图像以及主题。但是对于特定页面，我只想更改背景。关于如何在单独的 CSS 文件中实现这一点的任何建议？
The HTML for the page is:
页面的 HTML 是：
<head>
<link rel="stylesheet" type="text/css" href="core.css" />
<link rel="stylesheet" type="text/css" href="index.css" />
And core.css defines:
core.css 定义：
body
{
background-image: url('bg.png');
}
While index.css defines:
而 index.css 定义：
body
{
background-image:('homeBg.png');
}
Thanks!
谢谢！
采纳答案by raRaRa
background defined later should replace the previous ones. So if you have:
后面定义的背景应该替换以前的背景。所以如果你有：
Site1.css which has:
Site1.css 具有：
.img {
background: ...
}
Site2.css which has:
Site2.css 具有：
.img {
background: ...
}
then Site2.css .img would replace .img within Site1.css if Site2.css is included after Site1.css on your page.
如果 Site2.css 包含在页面上的 Site1.css 之后，则 Site2.css .img 将替换 Site1.css 中的 .img。
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?
更新：我不确定为什么没有正确替换 body 标签。你可以尝试给它一个类或 id，并使用它而不是 body 吗？
e.g.
例如
<body id="backgroundTest">
And then in the css files you would do #backgroundTest { background-image... }
然后在 css 文件中你会做 #backgroundTest { background-image... }
And just in case, could you check if homeBg.png exists and index.css. http://yourpage.com/homeBg.pngand http://yourpage.com/index.cssshould both exist.
以防万一，您能否检查一下 homeBg.png 和 index.css 是否存在。http://yourpage.com/homeBg.png和http://yourpage.com/index.css都应该存在。
回答by unknownrisk
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:
如果您想用任何内容替换背景图像（即使其处于非活动状态或“将其关闭”），请在下游样式表中使用“none”关键字：
background-image: none;
回答by Sotiris
For the specific page you can use a css rule in the page, using !important. If you add your-selector {background: url("the-path-for-the-bg-image") no-repeat !important;}in the file, will override the default background.
对于特定页面，您可以在页面中使用 css 规则，使用!important. 如果your-selector {background: url("the-path-for-the-bg-image") no-repeat !important;}在文件中添加 ，将覆盖默认背景。
回答by RoToRa
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
要么在 CSS 规则中使用与原始规则相同的选择器设置背景，并在原始规则之后包含您的新 CSS 文件，要么确保您的新规则具有一个具有更高特异性的选择器：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.
最后，您可以为 background 属性指定!important标志，但这通常是最后的手段，也是样式表组织不当的标志。
回答by jeroen
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...):
如果在正文中设置了页面背景，您可以通过为该特定页面中的正文提供一个类或一个 id 并添加（也可以在同一个 css 文件中...）来简单地否决它：
body.someClass {
background: ...
}
or
或者
body#someID {
background: ...
}
(in both the bodypart is not really needed as the class and the id overrule the selector)
（这两个body部分都不是真正需要的，因为类和 id 否决了选择器）
回答by Hyman Marchetti
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:
我最终做的是在我的样式表中进行覆盖，我不仅将它应用于 body、html：
So...
所以...
#id, html, body { background-color: #FFF }
Hope this might help someone.
希望这可以帮助某人。
回答by Dashrath
in index.css write
在 index.css 中写入
body { background-image:('homeBg.png') !important;
you can override any property defined anywhere by writing "!important" after it in new file
您可以通过在新文件中写入“!important”来覆盖任何地方定义的任何属性
