Couleur d'arrière-plan: aucun CSS valide?

432

Quelqu'un peut-il me dire si le CSS suivant est valide?

.class {
    background-color:none;
}

css background-color

— NarfkX
source

10

Le validateur peut souvent répondre à ce genre de question.

— thirtydot

10

Vous pouvez être confondu avec background:none;ce qui est valide et qui définit la couleur d'arrière-plan sur transparent.

— M. Lister

551

Vous voulez probablement transparentque ce nonen'est pas une background-colorvaleur valide .

La spécification CSS 2.1 indique ce qui suit pour la background-colorpropriété:

Value: <color> | transparent | inherit

<color>peut être soit un mot-clé, soit une représentation numérique d'une couleur. Les colormots clés valides sont:

aqua, noir, bleu, fuchsia, gris, vert, citron vert, marron, marine, olive, orange, violet, rouge, argent, turquoise, blanc et jaune

transparentet inheritsont des mots clés valides à part entière, mais ce nonen'est pas le cas.

— James Allardice
source

25

Oui. Étant donné que la valeur initiale est transparent, c'est ce que vous utilisez si vous souhaitez désactiver la coloration d'arrière-plan.

— M. Lister

1

aucun de ceux-ci ne sera réinitialisé à une valeur précédente (c'est-à-dire s'il est défini par une autre règle css :(

— pstanton

2

@pstanton dans votre cas, vous devez donner la couleur de fond: transparent! important;

— 2015 à

Cela me rappelle d'essayer d'utiliser la police de couleur lorsque j'ai commencé à coder. Bien sûr que colornon font-color. Cela a tellement de sens chaque fois qu'une autre propriété de police est fontdevant ...

— serraosays

@herr Mais toujours comme l'a dit pstanton, définir la couleur d'arrière-plan transparente remplacerait les propriétés CSS précédentes! Existe-t-il un moyen de supprimer cette propriété de couleur d'arrière-plan de manière à ce qu'elle prenne la propriété CSS de la précédente?

— SE_User

159

Non, utilisez transparentplutôt none. Voir l' exemple de travail ici dans cet exemple si vous allez changer transparentà nonecela ne fonctionnera pas

utiliser comme .class { background-color:transparent; }

Où .class est ce que vous nommerez votre classe transparente.

— Jitendra Vyas
source

Dans mon exemple, c'est complètement opposé. Si vous ne changez rien en transparent, cela ne fonctionnera pas. Je n'ai vraiment besoin d'en utiliser aucun: jsfiddle.net/BkAad

— Hrvoje Golcic

Dans votre exemple, changez en body *: not (.exception) {background-color: transparent} Vous devez supprimer le! Important car cela oblige tous les autres à l'intérieur à avoir cette propriété. Et à l'intérieur li (s) utilisez plutôt la propriété background-color que celle de l'arrière-plan pour la couleur d'arrière-plan seule.

— yveslebeau

67

La réponse est non.

Incorrect

.class {
    background-color: none; /* do not do this */
}

Correct

.class {
    background-color: transparent;
}

background-color: transparentaccomplit la même chose que ce que vous vouliez faire background-color: none.

— Sajidur Rahman
source

7

.class {
    background-color:none;
}

Ce n'est pas une propriété valide. Le validateur W3C affichera l'erreur suivante:

Erreur de valeur: couleur d'arrière-plan aucune n'est pas une valeur de couleur d'arrière-plan: aucune

transparentpeut avoir été sélectionné comme meilleur terme au lieu de 0ou nonevaleurs lors du développement de la spécification de CSS.

— Barun
source

2

Et cela répète ce que James a dit il y a deux ans et demi, mais dans un format non coupé et collable. ; ^)

— ruffin

6

CSS Level 3 spécifie la unsetvaleur de la propriété. De MDN :

Le mot clé CSS non défini est la combinaison des mots clés initiaux et hérités. Comme ces deux autres mots clés CSS, il peut être appliqué à n'importe quelle propriété CSS, y compris le raccourci CSS all. Ce mot clé réinitialise la propriété à sa valeur héritée si elle hérite de son parent ou à sa valeur initiale sinon. En d'autres termes, il se comporte comme le mot-clé inherit dans le premier cas et comme le mot-clé initial dans le second cas.

Malheureusement, cette valeur n'est actuellement pas prise en charge dans tous les navigateurs, y compris IE, Safari et Opera. Je suggère d'utiliser transparentpour le moment.

— Gert Hengeveld
source

3

écrire cela:

.class {
background-color:transparent;
}

— Abolfazl Miadian
source

2

Veuillez expliquer votre code et comment il aide à résoudre le problème! - De l'avis

— Luca Kiebel

D'accord. background-color est un attribut css et comme chaque attribut css peut avoir une valeur valide et non valide. La valeur valide pour la couleur d'arrière-plan peut être l'un des formats ci-dessous: # 5f9 ou # 56f293 ou transparent. transparent signifie que vous voulez une couleur de fond nulle ou nulle.

— Abolfazl Miadian

1

wow - 6 ans après la question (et la réponse) vous répondez avec un double?

— NarfkX

l'heure de la demande n'est pas importante car chaque jour, certaines personnes visitent cette page ou une autre ancienne page pour les réponses. Je pense que ma syntaxe de réponse est plus claire!

— Abolfazl Miadian

1

Donc, je voudrais expliquer le scénario où j'ai dû faire usage de cette solution. Fondamentalement, je voulais annuler l'attribut background-color défini par un autre CSS. Le résultat final attendu était de donner l'impression que le CSS d'origine n'avait jamais appliqué l'attribut background-color. Le réglage a background-color:transparent;rendu cela efficace.

— Binita Bharati
source

1

Je trouve cet arrière-plan: transparent ne fonctionne pas pour moi pour remplacer une couleur d'arrière-plan définie par un autre CSS. Si je choisis le fond: rouge; par exemple - cela fonctionnera. Mais fond: transparent; permet à l'autre couleur d'arrière-plan CSS de rester. Des idées pour arrêter ça?

— Auxiliaire Joel