Tradicionalmente, as cores usadas em CSS estão no formato hexadecimal ou no formato rgb, como rgb(171.205.239).
CSS3 traz algumas novas maneiras de lidar com cores, como o uso de canais HSL (Hue, Saturation, Light) e opacidade/alfa. Infelizmente, atualmente apenas Firefox 3+, Chrome 1.0+ e Safari 3+ e alguns navegadores derivados os suportam totalmente. Mas podemos fazer o nosso melhor, e o IE não começará a suportar algumas propriedades CSS3 até o Internet Explorer 9.
Opacidade
Na verdade, esta é uma propriedade antiga e, surpreendentemente, é suportada pelas versões atuais do IE – embora de uma forma mais complicada.
A opacidade torna todo o objeto CSS transparente e a transparência de todos os elementos filhos será herdada de forma adequada. A sintaxe oficial é a seguinte:
opacidade: [0-1 decimal];
Portanto, uma configuração opacity: 0.5; tornaria o objeto 50% transparente. Embora os navegadores mais recentes o suportem ativamente, os navegadores mais antigos ainda exigem algum código personalizado, assim como o Internet Explorer.
Atualmente, para versões mais antigas do Firefox, precisamos usar o prefixo -moz-, e para versões mais antigas do Safari/Chrome, precisamos usar o prefixo -webkit-. Para versões mais antigas do Safari que ainda usam o kernel KHTML em vez do kernel webkit, precisamos usar -khtml-. Então, se quisermos oferecer suporte a todos os navegadores, nosso código deverá ficar assim:
opacidade: 0,5;
-moz-opacidade: 0,5;
-webkit-opacidade: 0,5;
-khtml-opacidade: 0,5;
Ah, espere um minuto! O que fazer com o IE? Bem, o IE não oferece suporte para isso, mas usa um filtro proprietário. O método tradicional é curto e conciso:
filtro:alfa(opacidade=50);
Observe que para o IE precisamos usar números inteiros de 0 a 100, não decimais como o atributo de opacidade. Infelizmente, o Internet Explorer 8 oferece uma nova maneira de lidar com isso. Não tente lembrar este como o outro, é longo:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacidade=50)";
Claro, se você quiser oferecer suporte a navegadores IE mais antigos, terá que usar o mais curto acima, o que significa que se quiser ser compatível com a maioria dos navegadores, você precisará de um total de seis instruções CSS.
PS: Na verdade, o Safari suporta o atributo opacity desde a versão 1.2 (2004). O Safari com núcleo KHTML é basicamente difícil de encontrar. Na verdade, o Konqueror nunca suportou o atributo -khtml-opacity, então por favor não o use. (Levei em consideração a integridade do texto original na hora da tradução, por isso não fiz correções no código acima). O Opera oferece suporte à opacidade CSS3 desde a versão 9.0, enquanto o Firefox não oferece suporte nativo à opacidade até a versão 3.5. O filtro -ms- plus do IE8 é realmente um trabalho de gênio da Microsoft! No entanto, observe que se você quiser usar filter e -ms-filter ao mesmo tempo, observe que -ms-filter está escrito na frente de filter. -Shenfei