web-dev-qa-db-fra.com

Pourquoi la couleur de fond: aucune ne remplace une couleur de fond spécifiée?

Mon objectif est que toutes les cellules d'un tableau aient une couleur d'arrière-plan, à l'exception de celles de la classe "transparent". Voici un exemple de code ( jsfiddle correspondant ):

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

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

Pourquoi la cellule td.transparent ne suit-elle pas la règle css td.transparent? Lorsque j'inspecte l'élément, la règle est là, mais elle est remplacée par la règle td, qui semble enfreindre les règles de spécificité CSS normales.

Je peux obtenir ce que je veux en utilisant rgba(0,0,0,0) au lieu de none, mais rgba n'est pas pris en charge dans IE8 et je voudrais éviter d'utiliser un hack laid si je le pouvais.

J'aimerais aussi comprendre simplement pourquoi cela ne fonctionne pas comme je m'y attendais.

Pensées?

cssbackground-color
28
ralbatross

La valeur doit être une couleur valide et none n'est pas une couleur valide. Au lieu de cela, vous pouvez utiliser transparent (similaire à rgba(0,0,0,0) mais plus largement pris en charge). Si cela ne vous convient pas, vous pouvez toujours utiliser white ou utiliser une règle plus spécifique pour l'arrière-plan red.

58
Explosion Pills

Pour ce que ça vaut: vous pouvez remplacer background-color:none avec background: none et cela fonctionnera.

20
Danield

Aucune n'est une couleur valide, utilisez plutôt transparent.

Démo jsFiddle 

td.transparent {
    background-color: transparent;
}

Alternativement, vous pouvez également utiliser les éléments suivants:

La raison pour laquelle cela fonctionne est parce qu'il indique qu'il ne devrait y avoir aucun fond en général. Il ne fait pas référence à une couleur spécifique comme dans le premier exemple.

td.transparent {
    background: none;
}

jsFiddle utilisant cette méthode .

En remarque, l'utilisation des couleurs CSS3 (rgba) n'est pas prise en charge à 100%. Référence ici: http://caniuse.com/css3-colors

De plus, je voudrais dire que tout cela pourrait être évité si vous ne définissez pas un background-color Initial dans le premier endroit. Il n'y aurait alors aucune raison de remplacer le style d'origine si tel était le cas.

10
Josh Crozier

La syntaxe appropriée (pour CSS2.1) est:

background-color:transparent;

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

3
showdev

Une autre alternative consiste à réinitialiser la propriété à la valeur de l'élément parent (inherit) ou à la valeur par défaut définie par le navigateur pour la propriété (initial)

Dans mon cas particulier où j'avais besoin de remplacer la couleur d'arrière-plan, background-color: initial; est ce qui a résolu le problème.

0
Vivens Ndatinya