Trocar de imagem no CSS
03/10/2018
0
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
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:
Nesse caso do código acima, a imagem carregada será a definida no CSS, pois ela sobrescreverá a definida no HTML.
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
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!
Muito Obrigada!
Responder
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
Clique aqui para fazer login e interagir na Comunidade :)
