为什么background-color:none不能覆盖指定的背景颜色？

Question

我的目标是让表格中除了具有“transparent”类的单元格之外，所有单元格都有背景颜色。以下是一些示例代码（对应的 jsfiddle 链接）：

<style>
    td { background-color: red }
    td.transparent { background-color: none }
</style>

<table>
    <tr>
        <td>foo</td>
        <td class="transparent">bar</td>
    </tr>
</table>

为什么 td.transparent 单元格不遵循 td.transparent css 规则？当我检查该元素时，规则是存在的，但它被 td 规则覆盖了，这似乎违反了正常的 css 特异性规则。

我可以通过使用 rgba(0,0,0,0) 而非 none 来获得我想要的效果，但 rgba 不支持 IE8，如果可能的话，我希望避免使用丑陋的 hack。

我也想简单地了解为什么这不按照我预期的方式工作。

您有什么想法吗？

- ralbatross

---

"none" 不是 background-color 的有效属性值，但对于 background-image 是有效的。因此，快捷方式 background: none 可以使用。 - user2867288

Answer 1

该值必须是有效的颜色，none 不是有效的颜色。您可以使用 transparent（类似于 rgba(0,0,0,0)，但更广泛地受支持）来代替。如果这不好用，您始终可以选择 white 或者针对 red 背景使用更具体的规则。

- Explosion Pills

---

把英文翻译成中文。只返回翻译后的文本，不是大多数情况下的答案，包括我的。 - stackunderflow

@stackunderflow 这个答案已经有10年了，你有没有一个问题的链接，这个答案对你的使用情况不适用？ - Explosion Pills

Answer 2

值得一提的是: 你可以用 background: none 替换 background-color:none, 这样它就能正常工作了。

- Danield

Answer 3

无效颜色值为 None，请使用 transparent 替代。

jsFiddle 示例

td.transparent {
    background-color: transparent;
}

你也可以尝试使用以下方法：

这种方法有效的原因是它表明一般情况下不应该有背景，而不是像第一个例子中指定具体的颜色。

td.transparent {
    background: none;
}

点击此处可以查看使用这种方法的 jsFiddle.

---

顺便提一下，CSS3颜色（rgba）的使用并不是百分之百支持的。参考：http://caniuse.com/css3-colors

---

另外，我想说的是，如果您一开始没有设置初始的 background-color，那么所有这些都可以避免。如果是这样的话，就没有理由覆盖原始样式。

- Josh Crozier

Answer 4

适当的语法（适用于CSS2.1）为：

background-color:transparent;

http://www.w3.org/TR/CSS2/colors.html#propdef-background-color

- showdev

Answer 5

另一种选择是将属性重置为父元素的值（inherit）或浏览器为属性设置的默认值（initial）

在我需要覆盖背景颜色的特定情况下，background-color: initial; 解决了问题。

- Vivens Ndatinya