CSS 为什么 background-color:none 不覆盖指定的背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18836989/
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
Why does background-color:none not override a specified background color?
提问by ralbatross
My goal is for all cells in a table to have a background color except ones with the class 'transparent'. Here is some sample code (corresponding jsfiddle):
我的目标是让表格中的所有单元格都具有背景颜色，但类别为“透明”的单元格除外。这是一些示例代码（对应的 jsfiddle）：
<style>
td { background-color: red }
td.transparent { background-color: none }
</style>
<table>
<tr>
<td>foo</td>
<td class="transparent">bar</td>
</tr>
</table>
Why doesn't the td.transparent cell follow the td.transparent css rule? When I inspect the element the rule is there, but it is getting overridden by the td rule, which seems to break normal css specificity rules.
为什么 td.transparent 单元格不遵循 td.transparent css 规则？当我检查元素时，规则就在那里，但它被 td 规则覆盖，这似乎违反了正常的 css 特异性规则。
I can get what I want by using rgba(0,0,0,0)instead of none, but rgba is not supported in IE8 and I would like to avoid using an ugly hack if I could.
我可以通过使用rgba(0,0,0,0)而不是来获得我想要的东西none，但是 rgba 在 IE8 中不受支持，如果可以的话，我想避免使用丑陋的 hack。
I'd also like to simply understand why this isn't working the way I expected.
我也想简单地理解为什么这不像我预期的那样工作。
Thoughts?
想法？
回答by Explosion Pills
The value needs to be a valid color, and noneis not a valid color. Instead you can use transparent(similar to rgba(0,0,0,0)but more widely supported). If that's no good you can always go with whiteor use a more specific rule for the redbackground instead.
该值必须是有效颜色，并且none不是有效颜色。相反，您可以使用transparent（类似于rgba(0,0,0,0)但更广泛的支持）。如果这不好，您可以随时使用white或使用更具体的red背景规则。
回答by Danield
For what it's worth: you could replace background-color:nonewith background: noneand it will work.
对于它的价值：您可以替换background-color:none为background: none，它会起作用。
回答by Josh Crozier
None isn't a valid color, instead use transparent.
None 不是有效的颜色，而是使用transparent.
td.transparent {
background-color: transparent;
}
Alternatively, you could also use the following:
或者，您也可以使用以下内容：
The reason this works is because it is stating there should be no background in general. It is not referring to a specific color as in the first example.
这样做的原因是因为它表明一般不应该有背景。它不像第一个例子那样指的是特定的颜色。
td.transparent {
background: none;
}
As a side note, usage of CSS3 colors (rgba) is not 100% supported. Reference here: http://caniuse.com/css3-colors
作为旁注，并非 100% 支持使用 CSS3 颜色 (rgba)。参考这里：http: //caniuse.com/css3-colors
In addition, I would like to say that all of this could be avoidedif you didn't set an inital background-colorin the first place. There would then be no reason to overwrite the original style if this were the case.
另外，我想说，如果您没有首先设置初始值，则所有这些都可以避免background-color。如果是这种情况，则没有理由覆盖原始样式。
回答by showdev
The proper syntax (for CSS2.1) is:
正确的语法（对于 CSS2.1）是：
background-color:transparent;
http://www.w3.org/TR/CSS2/colors.html#propdef-background-color
http://www.w3.org/TR/CSS2/colors.html#propdef-background-color
回答by Vivens Ndatinya
Another alternative is to reset the property to the value from the parent element (inherit) or to the default value set by the browser for the property (initial)
另一种选择是将属性重置为来自父元素的值 ( inherit) 或浏览器为属性设置的默认值 ( initial)
In my particular case where I needed to override the background color, background-color: initial;is what fixed the issue.
在我需要覆盖背景颜色的特殊情况下，background-color: initial;是解决问题的方法。
