logo标签列表

如何用另一个CSS覆盖已定义在CSS中的背景图片？

cssbackground-image
32

我有一个名为 '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');
}

感谢！

能否提供两个 CSS 文件中的 CSS 定义以及它们在网页中的导入方式，这将有助于解决问题。 - Jón Trausti Arason
在 index.css 中的 '(' 前面是否缺少了 "url"？ - xorcus
@xorcus 现在看来，是的，“url”似乎丢失了...但我不能确定，因为这是很久以前的事情，现在已经忘记了。 - aateeque
7个回答
54
如果您想将背景图片替换为无（即使它无效或“关闭”），请在下游样式表中使用“none”关键字：
 background-image: none;
13

后定义的背景应该替换之前的背景。所以，如果你有：

Site1.css，其中包含：

.img {
    background: ...
}

Site2.css，其中包含：

.img {
    background: ...
}

如果在您的页面中导入Site1.css之后导入Site2.css，则Site2.css中的 .img 将替换 Site1.css 中的 .img。

更新：我不确定为什么 body 标签没有被正确地替换。你可以尝试给它一个类或 ID，并使用它来代替 body 标签吗？

例如：

<body id="backgroundTest">

然后在CSS文件中您需要这样做：#backgroundTest { background-image... }

另外，您可以检查homeBg.png和index.css是否存在。http://yourpage.com/homeBg.png 和 http://yourpage.com/index.css 应该都存在。

1
这是正确的做法，通过使用自然CSS“级联”。千万不要使用!important声明，因为它会使级联变得不可预测，并且未来的维护会更加困难。 - ajcw
这正是我所想的。我的代码HTML如下： `<head><link rel="stylesheet" type="text/css" href="core.css" /> <link rel="stylesheet" type="text/css" href="index.css" />` 我是否明显地做错了什么？ - aateeque
你的CSS代码应该替换index.css文件中的背景吗？你能给我展示一下两个文件中指定背景的CSS定义吗？（编辑你的问题） - Jón Trausti Arason
@RoToRa 感谢您的更新。我已经尝试过识别主体，但也不起作用！ - aateeque
@raRaRa 是的...这个路径上存在文件。 - aateeque
显示剩余6条评论
4

对于特定的页面，您可以在页面中使用CSS规则，使用!important。如果您在文件中添加your-selector {background: url("the-path-for-the-bg-image") no-repeat !important;}，将覆盖默认背景。

1

要么在具有与原始规则相同选择器的CSS规则中设置背景，并在原始文件之后包含您的新CSS文件，要么确保您的新规则具有更高的特异性选择器：http://www.w3.org/TR/CSS2/cascade.html#specificity

最后，您可以给背景属性添加!important标志，但通常这是一种最后的手段，也是样式表组织不良的迹象。

0
如果页面背景设置在body上，你可以通过给特定页面的body添加一个class或者id来覆盖它（也可以在同一个css文件中实现...）：
body.someClass {
  background: ...
}

或者

body#someID {
  background: ...
}

（在这种情况下，body 部分并不真正需要，因为类和 ID 会覆盖选择器。）

0
我有同样的问题。
最终我做的是，在我的覆盖样式表中，我把它应用到了 body, html:
所以...
#id, html, body { background-color: #FFF }

希望这能帮助到某个人。

0
在 index.css 文件中编写：
 body { background-image:('homeBg.png') !important;

你可以在新文件中在任何属性后面加上"!important"来覆盖已定义的属性。

1
在CSS中不应使用!important。如果被迫使用它，这意味着规则没有按正确顺序应用。 - Hozefa
1
@Hozefa，当前问题是如何在新文件中覆盖CSS属性。我的答案适用于给定的问题，并不是CSS使用指南。 - Dashrath
@Hozefa 如果你正在处理一个动态加载的第三方CSS（你绝对无法控制其中的样式规则），它已经定义了一个带有!important的样式，而你想要覆盖它，该怎么办？ - Rajshekar Reddy
@RajshekarReddy 说得好。如果第三方CSS加载了!important，那么你就没有选择余地了。另一个用例是JS使用style标签添加样式。 - Hozefa
@Dashrath，关于你的问题，你是对的。但是，这可能会给人留下这样的印象：使用!important作为覆盖样式的机制是可以的，最终导致CSS中到处都是!important。 - Hozefa
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接