Trocar de imagem no CSS

03/10/2018

2

Boa tarde, alguém sabe como poderia substituir uma imagem com css?
Eu tenho uma imagem na página, e de acordo com a cor do fundo da página, quero que apareça uma opção.

Obrigada
Ana
Responder

Post mais votado

04/10/2018

Olha, creio que não dê pra automatizar esse processo puramente com CSS. :(
Para alterar isso, o mais fácil seria usar Javascript mesmo, alterando a tag referente à imagem (apesar que eu acho uma má prática).
Em boas práticas, o ideal mesmo seria ter uma View para cada tema, ou então um CSS para cada. Por exemplo, deixe uma imagem padrão na página, e então crie um CSS que altere para a imagem X de fundo e a imagem X na página, e depois crie um segundo CSS contendo outra opção, e assim por diante... E então com Javascript você pode alternar entre qual o CSS que será carregado (ou até na renderização no backend).

Caso precisar mudar no CSS diretamente, sem modificação do HTML/Javascript sobre a tag <img>, pode ser feito assim:

<head>
  <style>
     
.imagemAlternativa {
        display: block;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background: url(https://via.placeholder.com/200x100) no-repeat;
        width: 180px; 
        height: 236px; 
        padding-left: 180px; 
}
  </style>
</head>
<body>
  <div class="header">
    <img class="imagemAlternativa" src="https://via.placeholder.com/350x150"">
  </div>
</body>


Nesse caso do código acima, a imagem carregada será a definida no CSS, pois ela sobrescreverá a definida no HTML.
Responder

Mais Posts

05/10/2018

Ana Feliciano

Eu tenho imagens tipo "slider" como fundo da página, e um menu superior. Queria alterar a cor dos itens do menu (imgs de logo e textos de acordo com a imagem de fundo.) Quando for para uma imagem de fundo escuro, trocar por uma menu com itens em branco.

Muito Obrigada!
Responder
Desse jeito vai ter que ser no Javascript mesmo então! Aí a troca das cores pode ser feita através de um evento, quando as imagens forem alteradas... Um exemplo de detecção e resposta ao evento (usando JQuery + Bootstrap e assumindo que as imagens "slider" de fundo sejam um componente Carousel):

$('#Carousel').carousel({
    interval: 2000
});

$('#Carousel').on('slid', function () {
    /* Aqui a troca das cores, através de tanto uma recarga de css, 
        quanto à uma troca direta das propriedades, e demais alternativas.  */
});
Responder