Juega con colores CSS3

Tradicionalmente, los colores utilizados en CSS están en formato hexadecimal o rgb, como rgb(171,205,239).

CSS3 trae algunas formas nuevas de lidiar con el color, como el uso de HSL (Tono, Saturación, Luz) y canales de opacidad/alfa. Desafortunadamente, actualmente sólo Firefox 3+, Chrome 1.0+ y Safari 3+ y algunos navegadores derivados los soportan completamente. Pero podemos hacer lo mejor que podemos, e IE no comenzará a admitir algunas propiedades CSS3 hasta Internet Explorer 9.

Opacidad

En realidad, esta es una propiedad antigua y, sorprendentemente, es compatible con las versiones actuales de IE, aunque de una manera más complicada.

La opacidad hace que todo el objeto CSS sea transparente y la transparencia de todos los elementos secundarios se heredará de forma adecuada. La sintaxis oficial es la siguiente:

opacidad: [0-1 decimal];

Entonces, una configuración de opacidad: 0.5; haría que el objeto fuera 50% transparente. Aunque los navegadores más nuevos lo admiten activamente, los navegadores más antiguos aún requieren algún código personalizado, al igual que Internet Explorer.

Actualmente, para versiones anteriores de Firefox, necesitamos usar el prefijo -moz-, y para versiones anteriores de Safari/Chrome, necesitamos usar el prefijo -webkit-. Para versiones anteriores de Safari que todavía usan el kernel KHTML en lugar del kernel webkit, necesitamos usar -khtml-. Entonces, si queremos admitir todos los navegadores, nuestro código debería verse así:

opacidad: 0,5;
-moz-opacidad: 0,5;
-opacidad del kit web: 0,5;
-khtml-opacidad: 0,5;

¡Ah, espera un minuto! ¿Qué hacer con IE? Bueno, IE no admite esto en absoluto, pero utiliza un filtro propietario. El método tradicional es breve y conciso:

filtro:alfa(opacidad=50);

Tenga en cuenta que para IE necesitamos usar números enteros del 0 al 100, no decimales como el atributo de opacidad. Lamentablemente, Internet Explorer 8 ofrece una nueva forma de solucionar este problema. No intentes recordar este como el otro, es largo:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacidad=50)";

Por supuesto, si desea admitir navegadores IE más antiguos, deberá usar el más corto anterior, lo que significa que si desea ser compatible con la mayoría de los navegadores, necesitará un total de seis declaraciones CSS.

PD: De hecho, Safari ha admitido el atributo de opacidad desde la versión 1.2 (2004). Safari con núcleo KHTML ya es básicamente difícil de encontrar. De hecho, Konqueror nunca ha admitido el atributo -khtml-opacity, así que no lo use. (Consideré la integridad del texto original al traducir, por lo que no hice correcciones al código anterior). Opera ha soportado la opacidad de CSS3 desde la versión 9.0, mientras que Firefox no admitió la opacidad de forma nativa hasta la versión 3.5. ¡El filtro -ms- plus de IE8 es realmente un trabajo genial de Microsoft! Sin embargo, tenga en cuenta que si desea utilizar filter y -ms-filter al mismo tiempo, tenga en cuenta que -ms-filter está escrito delante del filtro. ——Shenfei