1

Eu vi isso e fiquei pensando se seria possível fazer essa mesclagem de duas imagens apenas com CSS.

inserir a descrição da imagem aqui




Existe alguma forma de controlar essa transparência parcial de uma imagem sobre a outra, ou de uma imagem sobre um background ou texto?

inserir a descrição da imagem aqui

Tentei com opacity, mas não chegou nem perto do efeito desejado, pois não tem a "mesclagem" de uma imagem fundindo na outra.

body {
  margin: 0;
  padding: 0;
}
main {
  position: relative;
}
.bg1,
.bg2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-repeat: none;
  background-position: center;
}

.bg1 {
  background-image: url(https://unsplash.it/600x400/?image=881);
}

.bg2 {
  background-image: url(https://unsplash.it/600x400/?image=902);
  opacity: .5;
}
<main>
  <div class="bg1"></div>
  <div class="bg2"></div>
</main>

2 Respostas 2

1

img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />

Use mask-image do CSS, veja abaixo.

Exemplo onde a imagem possui gradiente de opacidade da direita para a esquerda (to left).

O parâmetro de opacidade pode ser alterado aqui rgba(0, 0, 0, 1), onde o 1 é o máximo visível.

Aplique no sentido que você precisa nas outras imagens (to left, to right, to bottom, ...)

img  {
   -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0)));
}
2
  • 1
    Bem vindo Tiago, vou te dar uma dica. Edite a sua resposta e use esse btn prntscr.com/lui4hw para criar um exemplo prático. Vai ficar bem melhor pra comunidade ver e entender a sua resposta!
    – hugocsl
    Commented 13/12/2018 às 14:28
  • Obrigado pela dica, o código foi alterado :) Commented 20/12/2018 às 15:09
-1

você pode usar o RGBA no seu backgroud (Imagem), e setar a transparência no final, por exemplo

atributo { background-color : rgba(50,50,100, 0.5) - onde 0.5 seria a quantidade de transparência aplicada.

1
  • Amigo isso eu já tenho, só que usei opacity. Eu quero que a imagem tenha 100% de cor de um lado e 0% do outro.
    – hugocsl
    Commented 13/12/2018 às 13:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .