CSS: Sobrepondo uma imagem com uma imagem transparente (png)

Aprenda neste post, uma forma simples e prática de colocar uma imagem (máscara) transparente sobre outra.

A grande jogada está na utilização de duas imagens com largura e altura iguais.

A imagem máscara terá de ser uma imagem transparente (PNG24).

<style type="text/css">
.imagem{
   position:relative;
}
.imagem-mascara {
   width:400px; /* largura da imagem máscara */
   height:400px; /* altura da imagem máscara */
   position:absolute;
   top:0;
   left:0;
   background:url(images/mascara.png) 0 0 no-repeat; /* imagem máscara */
}
</style>
<div class="imagem">
   <img src="imagem.jpg" width="400" height="400" border="0" />
   <div class="imagem-mascara"></div>
</div>

mascara.png
Máscara

imagem.jpg
Imagem modelo

5 comentários em “CSS: Sobrepondo uma imagem com uma imagem transparente (png)

  • 29 de agosto de 2012 em 17:40
    Permalink

    Parabéns pelo tuto ajudou muito.
    obrigado

    Resposta
  • 25 de setembro de 2012 em 16:54
    Permalink

    Olá Tiago,
    grande ideia essa sua, acho que vai me ajudar muito em um projeto que estou finalizando.
    Muito obrigado por compartilhar.

    Resposta
  • 6 de fevereiro de 2014 em 0:31
    Permalink

    seu site e muito bom amigo valeu pelas dicas você esta de parabéns :)

    Resposta
  • 12 de julho de 2016 em 8:07
    Permalink

    Carmba muito simples e funcional… Parabéns.

    Gostaria de saber se seria possível, adicionar a esta solução a escolha das imagens através de links.

    Por exemplo, eu ter uma manequim e escolher as cores da roupa por sobreposição?

    Resposta

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *