32

我的目标是让表格中的所有单元格都具有背景颜色，但具有“透明”类的单元格除外。这是一些示例代码（相应的 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，但是 IE8 不支持 rgba，如果可以的话，我想避免使用丑陋的 hack。

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

想法？

4

5 回答 5

61

该值必须是有效颜色，并且none不是有效颜色。相反，您可以使用transparent（类似于rgba(0,0,0,0)但更广泛支持）。如果这不好，您可以随时使用white或使用更具体的red背景规则。

于 2013-09-16T20:47:02.913 回答
23

对于它的价值：您可以替换background-color:none为background: none它会起作用。

于 2013-09-16T20:56:27.760 回答
13

None 不是有效的颜色，而是使用transparent.

jsFiddle 演示

td.transparent {
    background-color: transparent;
}

或者，您也可以使用以下内容：

之所以可行，是因为它表明一般不应该有背景。它没有像第一个示例中那样指代特定的颜色。

td.transparent {
    background: none;
}

jsFiddle 使用这种方法。

附带说明一下，CSS3 颜色 (rgba) 的使用不是 100% 支持的。参考这里：http ://caniuse.com/css3-colors

另外，我想说的是，如果你一开始没有设置 inital ，所有这些都是可以避免background-color的。如果是这种情况，就没有理由覆盖原始样式。

于 2013-09-16T20:47:46.547 回答
3

正确的语法（对于 CSS2.1）是：

background-color:transparent;

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

于 2013-09-16T20:47:04.780 回答
0

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

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

于 2019-08-19T22:49:25.360 回答