Opacidade com CSS em todos os browsers
Pode usar CSS para atribuir níveis de opacidade a objectos, de maneira a funcionar em todos os browsers.
A maior parte dos browsers modernos (excluindo, claro, o Internet Explorer) já interpretam CSS 3 para a opacidade. Por isso, para a grande maioria dos browsers modernos, basta usar esta linha de código para dar 60% de opacidade a um determinado objecto:
1 | opacity: 0.6; |
Para browsers Mozilla mais antigos, como o Netscape Navigator, use esta instrução:
1 | -moz-opacity: 0.6; |
Para versões mais antigas do Safari, terá que usar esta instrução:
1 | -khtml-opacity: 0.6; |
Por incrivel que pareça, para o recentemente surgido no mercado Internet Explorer 8, é necessário uma instrução específica:
1 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; |
Para versões mais antigas do Internet Explorer (IE5 até ao IE7) e para o Internet Explorer 8 a emular as páginas em IE7, use o seguinte:
1 | filter: alpha(opacity=60); |
Assim, se usando CSS quisermos dar 60% de opacidade, por exemplo a uma imagem, que tenha a classe ‘transparente’, temos que fazer o seguinte:
1 2 3 4 5 6 7 | image.transparente { opacity: 0.6; -moz-opacity: 0.6; -khtml-opacity: 0.6; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); } |
Note: A linha que começa por ‘-ms-filter’ tem que vir sempre depois da linha que começa por ‘filter’. Se não o fizer, a instrução não vai ser lida pelo Internet Explorer 8.
