Si no necesita admitir IE8, la ‘a’ en el valor de color rgba () controla el canal alfa (como un decimal que representa el porcentaje) esto:
.envase {
color de fondo: rgba (100%, 100%, 100%, .5);
}
… hará un contenedor translúcido (blanco) de 50% de opacidad.
- ¿Cuánto tiempo necesito para aprender el desarrollo front-end?
- ¿Qué herramientas en línea son las mejores para aprender a programar páginas web a partir de la nada?
- ¿ASP.NET está muerto?
- ¿Son accesibles los iframes así como su contenido?
- ¿Diferencia entre la validación del lado del cliente y la validación del lado del servidor?
Así será esto:
.envase {
color de fondo: blanco;
/ * IE (5-9) propiedad propietaria * /
filtro: alfa (opacidad = 50);
/ * IE9 y todos los demás navegadores * /
opacidad: .5;
}
La diferencia entre background-color: rgba () y la propiedad de opacidad es que la opacidad controla la opacidad del contenedor y todo lo que contiene, incluido el texto, las imágenes y cualquier elemento hijo anidado dentro de ese contenedor.
El filtro, la corrección de htc y otros hacks de expresiones de IE que solucionan problemas de opacidad en IE anteriores son problemas de seguridad potenciales, terribles en el rendimiento y no son estándar de todos modos. Una forma alternativa de dar un color transparente en el fondo de un cuadro en IE 7-8 es usar un png-24 transparente como imagen de fondo. Cree un png-24 blanco con 50% de transparencia y ordene el acceso directo de fondo CSS para que los navegadores que entienden rgba () anulen la declaración anterior para usar la imagen:
.envase {
fondo: url (cincuenta por ciento blanco.png);
fondo: rgba (100%, 100%, 100%, .5) ninguno;
}
