Trocar de imagem no CSS
03/10/2018
0
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
+ 0Post mais votado
04/10/2018
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

Gostei + 1
Mais Posts
05/10/2018
Ana Feliciano
Muito Obrigada!
Gostei + 0
05/10/2018
Vinicius Cavagnolli
$('#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. */ });
Gostei + 1
Clique aqui para fazer login e interagir na Comunidade :)