Leandro Medeiros

Archive for julho \01\UTC 2007|Monthly archive page

“Background” transparente

In CSS, Internet, pngfix, Trabalho, Webstandards on julho 1, 2007 at 3:40 am

Update: Pura coincidencia ou não, quando recebi o comentario do Vinicios estava trabalhando num projeto que necessitava usar transparência em uma div, mas o conteúdo que estaria dentro dessa div não poderia estar transparente, como acontecia neste post. Então, a solução que encontrei foi colocar o conteúdo em uma outra div e posicioná-la sobre a outra com a transparência. Dessa forma, apenas a div com o código vai ficar transparente. Talvez não seja a forma mais “elegante”… mas funciona!

Depois de algum tempo sem ter o que postar aqui no blog, finalmente achei algo interessante: Transparências. Como muitos já conhecem, para arquivos .PGN, existem alguns hacks e manhas para driblar o problema de transparência do IE. Mas e para “backgrounds”? Isso, imagens transparentes no fundo da página… se você usar uma imagem como background e usar o pngfix por exemplo, essa imagem não vai ficar transparente. Testei isso a muito tempo atrás e já sabia que não funcionava. Então fui à caça de uma solução. A curiosidade me levou a uma descoberta: com CSS é possível usar transparência nas imagens de fundo através de filtros. E isso funciona tanto para o adorado Firefox como pro IE. Na verdade é uma linha pra cada. Sem enrolar muito mais, vou colocar os códigos, que claro, devem ser adicionados ao restante dos atributos para a DIV desejada:

filter:alpha(opacity=30); > para o IE (de 0 à 100).
opacity: .30; > para o Firefox (de 0 à 1.0).

O interessante aqui, que eu gostaria de ressaltar, é que realmente funciona muito bem para os navegadores mais usados. Mas também existem alguns contras… como por exemplo o fato de as imagens que estiverem dentro de uma DIV com filtro ficam também transparentes. Ainda não consegui arrumar uma solução para esse problema mas continuo procurando. Talvez seja algo simples e até óbvio mas ainda não consegui sacar. Vi funcionar certinho em alguns blogs, mas o codigo deles é sempre uma zona. Se alguém souber, comenta aí! Por enquanto é isso. Surgindo novidades aviso aqui.