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が、rgba は IE8 でサポートされていないため、できれば醜いハックの使用を避けたいと考えています。

また、これが期待どおりに機能しない理由を簡単に理解したいと思います。

考え？

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

さらに、そもそもイニシャルを設定しなければ、これらすべてを回避できると言いたいです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 に答える