Comment supprimer l'image d'arrière-plan en CSS?

195

J'ai une règle générale qui donne à tous les DIV une image de fond.
J'ai un div (avec id = 'a') dont je ne veux pas qu'il ait l'image d'arrière-plan.
Quelle règle css dois-je lui donner?

html css Itay Moav -Malimovka
la source

Réponses:

36 
div#a {
    background-image: none;
}
Ruud
la source
31 
div#a {
  background-image: none !important;
}

Bien que "! Important" ne soit pas nécessaire, car "div # a" a une spécificité plus élevée que simplement "div".

M4N
la source
La partie! Important n'est pas nécessaire car la déclaration avec #a est plus précise qu'une déclaration de div et donc cette règle sera appliquée à la place de la règle générale de div.
Ruud
2
J'ai trouvé! Important d'être nécessaire dans Chrome
dlchambers
17 
div#a {
  background-image: url('../images/spacer.png');
  background-image: none !important;
}

J'utilise une image d'espacement transparente en plus de la règle pour supprimer l'image d'arrière-plan car IE6 semble ignorer le background-image: nonemême s'il est marqué !important.

MatthewPearson
la source
6
Qui se soucie d'IE6 ces jours-ci.
Rob W
-1 Votre réponse est incorrecte. J'ai commencé IE6, et le background-image:none;(avec ot sans !important) fonctionne parfaitement.
Rob W
8
En fait, je m'en soucie - l'un de mes clients a un environnement réseau isolé avec un logiciel spécifique qui n'a pas été mis à jour. IE6 est ce qu'ils doivent utiliser. Triste mais vrai :(
Russ Clarke
5
Avoir un vote favorable pour atténuer le vote négatif de Rob W. C'était assez impoli de sa part de voter pour une rétrocompatibilité qui n'est même pas un hack, qu'il puisse le reproduire ou non
Kavi Siegel
2 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.5, #fff));
background-image: -webkit-linear-gradient(center top, #fff 0%, #fff 50%);
background-image: -moz-linear-gradient(center top, #fff 0%, #fff 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
background-image: linear-gradient(to bottom, #fff 0%, #fff 50%);

pour les navigateurs plus anciens .. si vous avez défini css dans certains framewokrk.css comme select2.css dans IE9 background-image: -webkit-gradient etc. et que vous le voulez via une autre réécriture .css avec "background-image: none! important" ne fonctionne pas. J'ai utilisé la même couleur pour colorer le dégradé comme la couleur d'arrière-plan de la page.

buTs
la source
2

Quand background-image: none !important;n'ont aucun effet. Vous pouvez utiliser:

background-size: 0 !important;
Michał Szymański
la source
1

Si votre règle div est juste div {...}, alors #a {...}sera suffisante. Si c'est plus compliqué, vous avez besoin d'un sélecteur "plus spécifique", tel que défini par la spécification CSS sur la spécificité . (#a étant plus spécifique que div n'est qu'un seul aspect de l'algorithme.)

Juste amoureux
la source
0

Cela ne fonctionne pas:

.clear-background{
background-image: none;
}

Peut avoir des problèmes sur les anciens navigateurs ...

Ben Hall
la source
0

Remplacez la règle que vous avez par la suivante:

div:not(#a) { // add your bg image here //}
Circusdei
la source