Opacity em CSS
Postado por: Pedro Rogério em
Se algum dia você precisar aplicar transparência a objetos em sua página html, você fará o uso da propriedade opacity, e você vai ficar triste em saber que nem todos os browsers suportam essa propriedade. Mas como no desenvolvimento web, sempre acabamos dando um jeitinho, sempre encontramos algumas soluções, que estão todas listadas abaixo:
Opacity – Firefox e Opera
Se deja aplicar 70% de opacidade a um elemento, deve-se utilizar o seguinte código:
opacity: .7;
Opacity – Internet Explorer
filter:alpha(opacity=70);
Opacity – Versões antigas do Firefox
-moz-opacity:0.7;
Opacity – Safari e Google Chrome
-khtml-opacity: 0.7;
No exemplo vocês podem ver que foi aplicado 50% de trasnparência a uma div com um background preto.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
Muito bom Pedro!
Porém já tive problemas com o:
filter:alpha(opacity=70);
Ele não funciona em todos os IE’s.
Eu uso o:
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
Aí sim funciona em qualquer IE!
Tem alguma diferença? Você sabe do que se trata?
Abraços!
@Lucas Mezêncio,
Posso estar errado, mas se não me engano filter:alpha(opacity=70); só funciona em IEs maiores que 6, por isso você teve alguns problemas.
Valeu Pela dica… como eu ja falei aqui varias vezes ne, o importante é saber aonde encontrar essas coisas hehehe,… Pedrão o cara mais revoltado com o IE.
um abraço t+
Parabéns.
O link está errado!!!!
O correto é http://www.cssnolanche.com.br/uploads/opacity.jpg
Abraços!!!
Um detalhe que você esqueceu de comentar, e que para algumas pessoas (tipo eu) é importante, é que nenhuma destas opções de opacidade pode ser validada pois todas são tecnologías propietárias…
Primeiramente meus parabéns pelo site,
Tenho um problema com o opacity pois só quero transparente o fundo mas meu conteúdo também fica transparente.
Se tiver alguma alternativa.
Creio que atualmente todos navegadores aceitão, e a novidade é o RGBA do CSS3.