Background Transparente com CSS, por Fábio Assis

Navegando pelas comunidades e fóruns, percebo muitas pessoas perguntando como aplicar transparência apenas no fundo de um objeto, já que a propriedade filter: alpha(opacity=X) não funciona tão bem no IE e -moz-opacity:X atribui a transparência ao conteúdo do objeto. Bem, como acho esse um efeito muito interessante resolvi testar uma forma de fazê-lo funcionar. Essa é a solução q encontrei para aplicar transparência em um objeto html.

1. Criando o Layout.

Vamos, primeiro, criar um HTML para o objeto que gostaríamos de aplicar o efeito.

[CODE] - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Aplicando Transparência</title>
<style>

</style>
</head>
<body>
     <div class="alpha">
         <img src="image.jpg" alt="logo" />
         <h1>PlugMasters.com.br</h1>
        Utilizando a propriedade alpha das CSS, é possível aplicar transparência em um objeto, porém essa propriedade nem sempre funciona como gostaríamos. Nesse tutorial eu vou ensinar como podemos aplicar esse efeito para os principais navegadores do mercado, utilizando alguns macetes e hacks.
<strong>Plugando Webmasters de todo o Brasil</strong>.
     </div>
</body>
</html>

[ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]

E agora definimos no arquivo style.css as propriedades básicas:

[CODE] - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]

body {
     background-color:#FF0000;
     font-family:"Trebuchet MS", Tahoma, Verdana;
     font-size:10px;
     }
* { margin:0; padding:0; } /* Retirando as margens e paddings de todos os objetos */
.alpha {
     width:400px;
     padding:5px;
     background-color:#FFF;
     text-align:justify;
     border:2px solid #666;
     margin:50px auto 0 auto;
     }
.alpha img {
     float:left;
     margin-right:5px;
     border:1px solid #000;
     }
.alpha h1 {
     font-size:24px;
     font-weight:bold;
     }

[ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]

O resultado no browser seria esse:

Agora temos nosso layout pronto, vamos ao que interessa!

2. Aplicando a Transparência.

- Utilizando a propriedade opacity:

[CODE] - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]

.alpha {
     width:400px;
     padding:5px;
     background-color:#FFF;
     text-align:justify;
     border:2px solid #666;
     margin:50px auto 0 auto;
     filter:opacity(alpha=60); /* para o IE */
     -moz-opacity:0.6; /* para o FireFox */
     opacity:0.6; /* para o outros Navegadores */
     }

[ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]

Beleza! Agora nosso bloco esta transparente!
Mas Espera aí.. O conteúdo também esta transparente!
Bem, esse é o problema de utilizar opacity, conteúdo recebe a propriedade do objeto pai. Resolvemos isso da seguinte maneira:
Criamos um novo objeto para englobar o conteúdo do site e vamos chamá-lo de conteudo.

[CODE] - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]

<div class="alpha">
     <div class="conteudo">
         <img src="icon.gif" alt="Icone" />
         <h1>PlugMasters.com.br</h1>
         Utilizando a propriedade alpha das CSS, é possível aplicar transparência em um objeto, porém essa propriedade nem sempre funciona como gostaríamos. Nesse tutorial eu vou ensinar como podemos aplicar esse efeito para os principais navegadores do mercado, utilizando alguns macetes e hacks.
<strong>Plugando Webmasters de todo o Brasil</strong>.
     </div>
</div>

[ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]

E definimos seu css assim:

[CODE] - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]

.alpha .conteudo { position:relative; }

[ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]

Ahhh agora sim, o conteúdo não esta mais transparente... no IE!!
No FireFox continua transparente!!

Putz! Dessa vez não foi o IE quem deu problema! Arhgt!

Bem vamos colocar uns hacks então:

- Primeiro retiramos o opacity da declaração normal:

[CODE] - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]

.alpha {
     width:400px;
     padding:5px;
     text-align:justify;
     border:2px solid #666;
     margin:50px auto 0 auto;
     }

[ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]

Agora aplicando transparência apenas para o IE 6:

[CODE] - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]

* html body .alpha {
     background-color:#FFF;
     filter: alpha(opacity=60); /* Já q o FF não recebe, não vamos declarar o –moz-opacity */
     }

[ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]

No Photoshop ou Fireworks (ou qualquer outro programa) criamos uma imagem .PNG com a cor do background que queremos usar e com a transparência desejada, nesse caso uma imagem branca com 60% de opacidade; e definimos ela como pano de fundo para os navegadores que suportam a transparência do png (Opera, FF, IE 7, etc):

[CODE] - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]

html > body .alpha {
background-image:url(alpha.png);
}

[ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]

Agora sim! Fundo transparente e conteúdo opaco! Mas, cara, o meu cliente é chato e queria as bordas opacas, mas elas também ficaram transparentes.
Tranquilo! Basta adcionar um novo objeto por fora, retirar algumas propriedades do .alpha e colocá-las nele, não esquecendo das regras de boxmodel para objetos com padding.

[CODE] - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]

<div class="borda">
     <div class="alpha">
         <div class="conteudo">
             <img src="icon.gif" alt="Icone" />
             <h1>PlugMasters.com.br</h1>
             Utilizando a propriedade alpha das CSS, é possível aplicar transparência em um objeto, porém essa propriedade nem sempre funciona como gostaríamos. Nesse tutorial eu vou ensinar como podemos aplicar esse efeito para os principais navegadores do mercado, utilizando alguns macetes e hacks.
<strong>Plugando Webmasters de todo o Brasil</strong>.
         </div>
    </div>
</div>

[ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]

[CODE] - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]

.borda {
     border:2px solid #666;
     width:410px; /* Corrigindo o BoxModel com 400px de largura e padding de 5 px */
     margin:50px auto 0 auto;
     }

[ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]

Colocando tudo junto:

- - HTML:

[CODE] - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Aplicando Transparência</title>
<style>

</style>
</head>
<body>

<div class="borda">
     <div class="alpha">
         <div class="conteudo">
         <img src="icon.gif" alt="Icone" />
         <h1>PlugMasters.com.br</h1>
        Utilizando a propriedade alpha das CSS, é possível aplicar transparência em um objeto, porém essa propriedade nem sempre funciona como gostaríamos. Nesse tutorial eu vou ensinar como podemos aplicar esse efeito para os principais navegadores do mercado, utilizando alguns macetes e hacks.
<strong>Plugando Webmasters de todo o Brasil</strong>.
         </div>
    </div>
</div>
</body>
</html>

[ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]

- - CSS:

[CODE] - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]

/* Definições globais */

body {
     background-color:#FF0000;
     font-family:"Trebuchet MS", Tahoma, Verdana;
     font-size:10px;
     }
* { margin:0; padding:0; } /* Retirando as margens e paddings de todos os objetos */
.alpha {
     width:400px;
     padding:5px;
     text-align:justify;
     }
.alpha img {
     float:left;
     margin-right:5px;
     border:1px solid #000;
     }
.alpha h1 {
     font-size:24px;
     font-weight:bold;
     }
.borda {
     border:2px solid #666;
     width:410px; /* Corrigindo o BoxModel com 400px de largura e padding de 5 px */
     margin:50px auto 0 auto;
     }

/* Aplicando a transparência apenas no IE 6 */
* html body .alpha {
     background-color:#FFF;
     filter: alpha(opacity=60); /* Já q o FF não recebe, não vamos declarar o –moz-opacity */
     }

/* Aplicando a background-image para os outros navegadores */
html > body .alpha {
     background-image:url(alpha.png);
     }

[ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]

Espero que vocês curtam esse tutorial! Qualquer duvida postem nos comentários!

Abraço!

eduardo <stuat.eduardo@gmail.com>

bem explicado
parabéns pelo tuto ;)

Paulo Fonseca <psfonseca@gmail.com>

Muito bem explicado, só falta o download dos arquivos pra ficar excelente!!! Aí dá pra gente brincar.

Fabio <assisfabio@gmail.com>

Bem.. não coloquei os arquivos para download pq descrevi o codigo fonte no final dele, mas tentarei isso no próximo!

abraços!

Gilvan <gilvan.mariano@gmail.com>

Contrubuição muito relevante meu amigo.

parabéns : Não avaliado

Marcio <marcio.camilo@ubbi.com.br>

Sensacional, boa didatica! o conteudo esta excelente, procurava isso a tempos! obrigado.

Edu <duduwebdesign@hotmail.com>

Vlw! salvou minha pele!

Claudio <claudio@aloo.com.br>

Cara como é bom ter pessoas como vc na internet cara, vou tentar desenvolver mais coisa.esGrato desde jápero mais dica sua se poder mande direto parao meu email.

Elcio Nogueira Garcia <impgarcia@hotmail.com>

Gostei muito, não sei muito bem sobre CSS mas ja foi o suficiente para aprender alguma coisa.
Obrigado

Wellington Oliveira dos Santos <welblade@gmail.com>

Só ficou faltando algumas screen shots pra gente ir acompanhando o desenvolvimento, sem nós mesmo irmos fazer o script

sam <samuel_trix@yahoo.com.br>

Cara..! Muito bom. O chato é ter que inserir rack´s. Fazer o q! É a vida. Valeu, me ajudou muito.

Jeison <jnomade@hotmail.com>

não vi nenhuma novidade, onde as img e os textos no FF ficaram certos porem no IE6 elas também ficaram transparentes e isso é problema

Fabio <assisfabio@gmail.com>

Jeison, tem certeza q você fez o tutorial corretamente? pq vc é a unica pessoa q disse q isso não funcionou. Eu não ´o escrevi, como testei e homologuei esse tuto em IE 6/7, Firefox 1.5/2.0, Opera 9, Safari 3.0 para Win e Safari MacOsX. Revise seu código e poste sua duvida, se eu estiver enganado, escrevo um tuto só pra te pedir desculpas!

Lía <lia.siqueira@gmail.com>

eu COPIEI tudo o que vc escreveu aqui e colei no meu código. só funcionou no firefox, no ie6 o conteúdo tá transparente junto com o bg... =(

Pedro <pedro@ibest.com.br>

Muito bom este tuto! Devia ter procurado a mais tempo por transparencia com CSS. Vlw

Fabio Assis <assisfabio@gmail.com>

Lía,
eu reteestei os codigos e eles funcionam perfeitamente.
Me envie um email com sua duvida que eu tentarei ajuda-la.

abraço!

Edgar <eddietatoo@gmail.com>

Erro:
filter:opacity(alpha=60); / para o IE /

Correto:
filter:alpha(opacity=60); / para o IE /

Valeu a dica