Como criar imagens transparentes com CSS ?
Pietro Gaião | maio 24th, 2010 | Tableless | 1 Comment »
Vamos ver como podemos criar imagens transparentes com CSS.
Fiz uns testes, esse CSS funciona em todos os navegadores.
Veja um exemplo de como ficarão as imagens:
Imagem original:
Imagem com transparência:
Olhe como ficou o código fonte:
<img src="brasil.jpg" width="150" height="113" alt="brasil"
style="opacity:0.4;filter:alpha(opacity=40)" />
O Firefox usa a propriedade opacity:x de transparência, enquanto usa o IE filter:alpha(opacity=x).
No Firefox (opacity:x) x pode ser um valor 0.0 – 1.0. Um valor mais baixo faz com que o elemento fique mais transparente.
No IE (alpha(opacity=x)) x pode ser um valor de 0 – 100. Um valor mais baixo faz com que o elemento fique mais transparente.
Como colocar texto em uma caixa transparente com CSS
O código-fonte fica assim:
<html>
<head>
<style type="text/css">
div.background
{
width: 500px;
height: 250px;
background: url (brasil.jpg) repeat;
border: 2px preta sólida;
}
div.transbox
{
width: 400px;
height: 180px;
margin: 50px 30px;
background-color: # ffffff;
border: 1px preto sólido;
/ * Para * IE /
filter: alpha (opacity = 60);
/ * Padrão CSS3 /
opacidade: 0,6;
}
p div.transbox
{
margin: 40px 30px;
font-weight: bold;
color: # 000000;
}
</style>
</head>
<body>
class="background"> <div
class="transbox"> <div
<p> Este é um texto que é colocado na caixa transparente.
Este é um texto que é colocado na caixa transparente.
Este é um texto que é colocado na caixa transparente.
Este é um texto que é colocado na caixa transparente.
Este é um texto que é colocado na caixa transparente.
</p>
</div>
</div>
</body>
</html>
Primeiro, criamos um elemento div (class = “background”), com uma altura e largura fixa, uma imagem de fundo, e uma borda. Então vamos criar um pequeno div (class = Transbox “) dentro do elemento div primeiro. Isso também tem um div com largura fixa, um fundo imagem e uma borda.
Dentro da div transparente, adicionaremos algum texto dentro.
Popularity: 18% [?]
Gustavo Girard
muito bom o efeito, adorei.
Mas não consigo fazer funcionar, copiei o código para o DreamWeaver e mesmo assim, não funciona(fiz todos os ajustes antes claro), mas o box não aparece esmaecido.
oque pode ser?