web-dev-qa-db-de.com

Warum überschreibt Hintergrundfarbe: keine eine angegebene Hintergrundfarbe nicht?

Mein Ziel ist es, dass alle Zellen in einer Tabelle eine Hintergrundfarbe haben, mit Ausnahme der Zellen mit der Klasse 'transparent'. Hier ist ein Beispielcode ( entsprechendes jsfiddle ):

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

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

Warum folgt die td.transparent-Zelle nicht der td.transparent-CSS-Regel? Wenn ich das Element betrachte, ist die Regel vorhanden, wird jedoch von der td-Regel überschrieben, die gegen normale CSS-Spezifitätsregeln zu verstoßen scheint.

Ich kann bekommen, was ich will, indem ich rgba(0,0,0,0) anstelle von none benutze, aber rgba wird im IE8 nicht unterstützt und ich möchte die Verwendung eines hässlichen Hack vermeiden, wenn ich könnte.

Ich möchte auch einfach verstehen, warum dies nicht so funktioniert, wie ich es erwartet hatte.

Gedanken?

cssbackground-color
28
ralbatross

Der Wert muss eine gültige Farbe sein und none ist keine gültige Farbe. Stattdessen können Sie transparent verwenden (ähnlich wie rgba(0,0,0,0), wird jedoch allgemeiner unterstützt). Wenn das nicht gut ist, können Sie immer mit white gehen oder stattdessen eine spezifischere Regel für den red Hintergrund verwenden.

58
Explosion Pills

Für das, was es wert ist: Sie könnten background-color:none Durch background: none Ersetzen und es wird funktionieren.

20
Danield

Keine ist keine gültige Farbe, verwenden Sie stattdessen transparent.

jsFiddle Demo 

td.transparent {
    background-color: transparent;
}

Alternativ können Sie auch Folgendes verwenden:

Der Grund, warum dies funktioniert, ist, dass es im Allgemeinen keinen Hintergrund geben sollte. Es bezieht sich nicht auf eine bestimmte Farbe wie im ersten Beispiel.

td.transparent {
    background: none;
}

jsFiddle mit dieser Methode .

Als Randnotiz wird die Verwendung von CSS3-Farben (rgba) nicht zu 100% unterstützt. Verweisen Sie hier: http://caniuse.com/css3-colors

Darüber hinaus möchte ich sagen, dass all dies vermieden werden könnte , wenn Sie kein erstes background-color an erster Stelle. In diesem Fall gibt es keinen Grund, den ursprünglichen Stil zu überschreiben.

10
Josh Crozier

Die richtige Syntax (für CSS2.1) lautet:

background-color:transparent;

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

3
showdev

Eine andere Alternative besteht darin, die Eigenschaft auf den Wert des übergeordneten Elements (inherit) oder auf den vom Browser für die Eigenschaft festgelegten Standardwert (initial) zurückzusetzen.

In meinem speziellen Fall, in dem ich die Hintergrundfarbe überschreiben musste, background-color: initial; hat das Problem behoben.

0
Vivens Ndatinya