Transparências utilizando apenas CSS
Dar transparência a uma imagem utilizando CSS não é algo complexo, para isso utiliza-se a propriedade opacity:x, no caso do Firefox, e filter:alpha(opacity=x) no caso do IE, vamos ainda utilizar -khtml-opacity:x, para determinadas versões do Safari/Konqueror e -moz-opacity, para versões do Mozilla/Firebird.
Apesar de não ser CSS standard, funciona em praticamente todos os browsers mais modernos, para além disso faz parte da sintaxe das CSS versão3 (opacity:x).
Exemplo 1 - Imagem com Transparência
Imagem com Transparência

HTML
<img class="linkopacity" src="http://www.brunocarlos.com/blog/wp-content/uploads/2008/02/image1.jpg" alt="heroes 1" />
CSS
img.linkopacity {
filter:alpha(opacity=50);-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
width:120px;
height:90px;
border:1px solid black;
}
Utilizando as propriedades -moz-opacity, opacity e -khtml-opacity os valores podem variar entre 0.0 e 1.0. Quanto mais se aproxima do zero mais transparente fica o objecto.
Na propriedade filter:alpha(opacity:x) os valores variam entre 0 e 100. Quando mais se aproxima do zero mais transparente fica o objecto.
Exemplo 2 - Tranparência da Imagem com o Efeito Mouseover
Mova o cursor do rato sobre as 3 imagens apresentadas:

![]()

HTML
<a class="linkopacity" href="http://l.yimg.com/img.tv.yahoo.com/tv/us/img/site/22/73/0000042273_20070824163919.jpg"> <img src="http://www.brunocarlos.com/blog/wp-content/uploads/2008/02/image1.jpg" title="Imagem 1."></a> <a class="linkopacity" href="http://l.yimg.com/img.tv.yahoo.com/tv/us/img/site/22/78/0000042278_20070824163934.jpg"> <img src="http://www.brunocarlos.com/blog/wp-content/uploads/2008/02/image2.jpg" title="Imagem 2."></a> <a class="linkopacity" href="http://www.guiadeseriados.com.br/wp-content/photos/ew_heroes4.jpg"> <img src="http://www.brunocarlos.com/blog/wp-content/uploads/2008/02/image3.jpg" title="Imagem 3"></a>
CSS
a.linkopacity img,
img.linkopacity {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
width:120px;
height:90px;
border:1px solid black;
}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}
Neste caso introduzimos apenas a propriedade onmouseover (:hover). Partimos de 3 imagens com transparência e quando passamos o rato por cima retiramos a transparência, ou seja colocamos os valores no máximo (1.0 e 100).
Exemplo 3 - Texto e Imagem de Fundo
Neste exemplo vamos juntar os exemplos anteriores e adicionar texto para obter algo um pouco mais composto.
HTML
<div id="group"> <h1 id="textopacity"> Heroes </h1> <div align="center"> <a class="linkopacity" href="http://l.yimg.com/img.tv.yahoo.com/tv/us/img/site/22/73/0000042273_20070824163919.jpg"><img src="http://www.brunocarlos.com/blog/wp-content/uploads/2008/02/image1.jpg" title="Click to see easy opacity hover code."></a> <a class="linkopacity" href="http://l.yimg.com/img.tv.yahoo.com/tv/us/img/site/22/78/0000042278_20070824163934.jpg"><img src="http://www.brunocarlos.com/blog/wp-content/uploads/2008/02/image1.jpg" title="It's simple code. Click it."></a> <a class="linkopacity" href="http://www.guiadeseriados.com.br/wp-content/photos/ew_heroes4.jpg"><img src="http://www.brunocarlos.com/blog/wp-content/uploads/2008/02/image3.jpg" title="You know you want it. Click it."></a> </div> </div>
CSS
a.linkopacity img,
img.linkopacity {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
width:120;
height:90;
border:1px solid black;
}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}
div#group{
width:400px;
height:300px;
background:url(http://www.brunocarlos.com/blog/wp-content/uploads/2008/02/heroes.jpg) repeat;
}
h1#textopacity{
color:white;
width:100%;
background:url(http://www.brunocarlos.com/blog/wp-content/uploads/2008/02/heroes.jpg);
filter:alpha(opacity=70);
-moz-opacity:.70;
opacity:.70;
font-size:42px;
line-height:2.5em;
text-align:center;
}
Neste caso utilizamos uma imagem de fundo sem transparência, no entanto adicionamos texto com transparência adicionando as 3 imagens que apresentámos no exemplo 2. Dando um aspecto final bastante “cool”.
HTML com os diferentes exemplos apresentados.
Artigos Relacionados
Gostou do artigo? Deixe um comentário no formulário abaixo para continuar a troca de ideias, ou subscreva o blog por RSS e receba os artigos assim que eles são publicados no seu leitor preferido.




![Validate my RSS feed [Valid RSS]](http://www.brunocarlos.com/wp-content/themes/Blue_Netkappa/images/rss_valid.png)
Prezado amigo.
Usei o que foi dito em varios browses e tive sucesso, pôrem, o IE 6 não funcionol.
Vc sabe dizer o q faço para corrigir esse problema.
Grato.