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
imagem.jpg
Parabéns pelo tuto ajudou muito.
obrigado
Olá Tiago,
grande ideia essa sua, acho que vai me ajudar muito em um projeto que estou finalizando.
Muito obrigado por compartilhar.
Funciona bacana cara, mas quando clico com mouse direito salvar imagem como, só salva a imagem de cima, como faço para salvar a imagem toda em si com a sobreposta?
valew era o que eu procurava
seu site e muito bom amigo valeu pelas dicas você esta de parabéns 🙂
isso é obvio o meio da imagem ta transparente, quero ver você fazer ao contrario fazer uma mascara como essa
http://girliemac.com/assets/images/wp-content/misc/svg-mask.png
uma imagem aparece dentro de outra imagem mais a imagem do fundo não aparece na parte transparente da imagem, consegui fazer isso com mask-image mais isso só funciona no chrome
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?
Realmente este é um ótimo artigo, além de ser curto e direto ao assunto mostra de forma clara e funcional, como podemos implementar uma imagem (máscara) transparente de um botão Play sobre thumbnail de vídeo(s).
Olá Diego.
Seria o mesmo princípio do post. A imagem do botão play tem que ter a mesma dimensão do thumbnail.
Show, funcionou bem!