如何删除css中的背景图像？答案

【问题标题】：How do I remove background-image in css?如何删除css中的背景图像？
【发布时间】：2010-11-30 11:18:21
【问题描述】：

我有一个通用规则，它为所有 DIV 提供背景图像。
我有一个 div（id='a'），我不希望它有背景图片。
我必须给它什么 css 规则？

【问题讨论】：

标签： html css

【解决方案1】：

试试：

div#a {
    background-image:none
}

【讨论】：

只需使用#a {}。 Don't use element types in selectors unless necessary.
“出于性能原因，避免不必要的祖先选择器很有用。”当您不是 Google 时，这并不是真正的问题。
W3C 关于 CSS 3 选择器的建议 > 计算选择器的特异性 w3.org/TR/css3-selectors/#specificity

【解决方案2】：

div#a {
    background-image: none;
}

【讨论】：

【解决方案3】：

div#a {
  background-image: none !important;
}

虽然“!important”可能不是必需的，因为“div#a”比“div”具有更高的特异性。

【讨论】：

!important 部分不是必需的，因为带有#a 的声明比 div 的声明更精确，因此将应用此规则而不是一般的 div 规则。
我发现 !important 在 Chrome 中是必要的

【解决方案4】：

div#a {
  background-image: url('../images/spacer.png');
  background-image: none !important;
}

除了删除背景图像的规则之外，我还使用透明间隔图像，因为 IE6 似乎忽略了background-image: none，即使它被标记为!important。

【讨论】：

现在谁在乎 IE6。
-1 你的答案不正确。我启动了 IE6，background-image:none;（带 ot 不带!important）完美运行。
实际上，我很在意 - 我的一个客户有一个隔离的网络环境，其中包含一些尚未更新的特定软件。 IE6是他们必须使用的。悲伤但真实:(
投赞成票以减轻 Rob W 的投反对票。仅仅为了向后兼容性而投反对票是非常粗鲁的，这甚至不是黑客，不管他是否可以复制它

【解决方案5】：

由于在 css3 中可能会设置多个背景图像，因此设置“无”只会创建一个新图层并且不会隐藏任何内容。

http://www.css3.info/preview/multiple-backgrounds/ http://www.w3.org/TR/css3-background/#backgrounds

我还没有找到解决办法...

【讨论】：

我相信“背景：无；”将覆盖

【解决方案6】：

当background-image: none !important; 无效时。您可以使用：

background-size: 0 !important;

【讨论】：

【解决方案7】：

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.5, #fff));
background-image: -webkit-linear-gradient(center top, #fff 0%, #fff 50%);
background-image: -moz-linear-gradient(center top, #fff 0%, #fff 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
background-image: linear-gradient(to bottom, #fff 0%, #fff 50%);

对于较旧的浏览器.. 如果您在某些 framewokrk.css 中定义了 css，例如 IE9 background-image: -webkit-gradient 等中的 select2.css，并且您希望通过另一个 .css 重写它，并使用“background-image: none ！重要”不起作用。我使用了与页面背景颜色相同的颜色来着色渐变。

【讨论】：

【解决方案8】：

如果您的 div 规则只是 div {...}，那么 #a {...} 就足够了。如果它更复杂，您需要一个“更具体”的选择器，由CSS specification on specificity 定义。（#a 比 div 更具体只是算法中的一个方面。）

【讨论】：

【解决方案9】：

这行不通：

.clear-background{
background-image: none;
}

在旧浏览器上可能会出现问题...

【讨论】：

【解决方案10】：

将您的规则替换为以下内容：

div:not(#a) { // add your bg image here //}

【讨论】：

【解决方案11】：

HTML：

<div id="a" class="mydiv"></div>

CSS：

div#a {
       background-image:none;
}

另一种方式：

div:not(#a) {
     //all rules goes here 
     //add image here
     //div with id a not effected by these rules
   }

多个（非伪）

   div:not(#a):not(#b):not(#c) {
     //all rules goes here 
     //add image here
     //div with ids not effected with these rules
   }

【讨论】：