Trocar de imagem no CSS

Bootstrap

CSS

HTML5

CSS3

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

Ana Feliciano

Curtidas 0

Melhor post

Vinicius Cavagnolli

Vinicius Cavagnolli

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.
GOSTEI 1

Mais Respostas

Ana Feliciano

Ana Feliciano

03/10/2018

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!
GOSTEI 0
Vinicius Cavagnolli

Vinicius Cavagnolli

03/10/2018

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.  */
});
GOSTEI 1
POSTAR