Como faço para remover a imagem de fundo em css?

192

Eu tenho uma regra geral que fornece a todos os DIVs uma imagem de plano de fundo.
Eu tenho uma div (com id = 'a') que não quero que tenha a imagem de fundo.
Qual regra css eu tenho para dar?

html css

— Itay Moav-Malimovka
fonte

342

Experimentar:

div#a {
    background-image:none
}

— AnthonyWJones
fonte

13

Apenas use #a {}. Não use tipos de elementos nos seletores, a menos que seja necessário .

— Jezen Thomas

3

"Evitar seletores de ancestrais desnecessários é útil por razões de desempenho." Não é realmente um problema quando você não é o Google.

— Davor

Recomendação W3C em CSS 3 Seletores> Cálculo especificidade de um seletor w3.org/TR/css3-selectors/#specificity

— TarranJones

34

div#a {
    background-image: none;
}

— Ruud
fonte

30

div#a {
  background-image: none !important;
}

Embora o "! Important" possa não ser necessário, porque "div # a" tem uma especificidade maior do que apenas "div".

— M4N
fonte

A parte! Important não é necessária, pois a declaração com #a é mais precisa que a declaração de div e, portanto, esta regra será aplicada em vez da regra geral de div.

— Ruud

1

Achei importante ser necessário no Chrome

— dlchambers

17

div#a {
  background-image: url('../images/spacer.png');
  background-image: none !important;
}

Uso uma imagem espaçadora transparente além da regra para remover a imagem de plano de fundo porque o IE6 parece ignorar o background-image: nonemesmo que esteja marcado !important.

— MatthewPearson
fonte

6

Quem se importa com o IE6 hoje em dia.

— Rob W

-1 Sua resposta está incorreta. Comecei o IE6 e o background-image:none;(com ou sem !important) funciona perfeitamente.

— Rob W

8

Na verdade, eu me importo - um dos meus clientes tem um ambiente de rede isolado com algum software específico que não foi atualizado. IE6 é o que eles precisam usar. Triste, mas é verdade :(

— Russ Clarke

5

Tenha um voto positivo para reduzir o voto negativo de Rob W. Ele foi muito rude da parte dele downvote apenas para compatibilidade com versões anteriores que nem sequer é um hack, independentemente de se ele poderia reproduzi-lo ou não

— Kavi Siegel

8

Como no CSS3, é possível definir várias imagens de fundo. A configuração "none" criará apenas uma nova camada e não ocultará nada.

http://www.css3.info/preview/multiple-backgrounds/ http://www.w3.org/TR/css3-background/#backgrounds

Ainda não encontrei uma solução ...

— Sou eu
fonte

Eu acredito que "background: none;" irá substituir

— circusdei

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%);

para navegadores mais antigos .. se você definiu o css em alguns framewokrk.css, como select2.css, na IE9 background-image: -webkit-gradient etc., e você deseja outro através de. não funciona. Usei a mesma cor para colorir gradiente como a cor de fundo da página.

— buTs
fonte

1

Se sua regra div for justa div {...}, #a {...}será suficiente. Se for mais complicado, você precisará de um seletor "mais específico", conforme definido pela especificação CSS sobre especificidade . (#a ser mais específico que div é apenas um aspecto no algoritmo.)

— Apenas apaixonado
fonte

1

Quando background-image: none !important;não tem efeito. Você pode usar:

background-size: 0 !important;

— Michał Szymański
fonte

0

Isso não funciona:

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

Pode ter problemas em navegadores antigos ...

— Ben Hall
fonte

0

Substitua a regra que você possui pelo seguinte:

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

— circusdei
fonte