Trocar de imagem no CSS

03/10/2018

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

Ana Feliciano

Curtir t�pico + 0

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.

Vinicius Cavagnolli

Responder

Gostei + 1

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

Gostei + 0

05/10/2018

Vinicius Cavagnolli

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

Gostei + 1