Opacidad CSS (Opacidad)

La propiedad opacity de CSS especifica la opacidad de un elemento. La propiedad opacity especifica la opacidad de un elemento. En otras palabras, la propiedad opacity especifica el grado de cobertura del fondo detrás de un elemento.

Transparencia entre navegadores

Ahora, la opacidad (opacity) es parte de CSS3Es parte de las especificaciones, pero ha existido durante mucho tiempo. Sin embargo, los navegadores más antiguos tienen diferentes formas de especificar la opacidad o transparencia.

Firefox, Safari, Chrome, Opera e IE9tenga transparencia CSS

Esta es la sintaxis más reciente de opacidad CSS en todos los navegadores actuales.

p {
　　　　opacidad: 0.7;
}

La regla de estilo anterior hará que el elemento de párrafo70% opaco (o30% transparente).

El rango de valores del atributo opacity es de 0.0 a1. Establecer opacity:1; harán que el elemento sea completamente opaco (es decir, 0% transparente), opacity: 0; mientras que opacity: 0 lo hará completamente transparente (es decir,100% transparente).

Internet Explorer 8y métodos de implementación de transparencia CSS en versiones inferiores

Internet Explorer 8y versiones anteriores que soportan la propiedad de Microsoft "filtro alpha" para especificar la transparencia del elemento.

p {
　　　　filtro: alpha(opacidad=50);
　　　　zoom:　1;　　/*　Solución para IE7　*/
}

transparencia CSS compatible con todos los navegadores

Combinando estos dos pasos, obtendrátodos los navegadoresdeCódigo de transparencia.

p {
　　　　opacidad: 0.5;　　/*　Opacidad para Navegadores Modernos　*/
　　　　filtro: alpha(opacidad=50);　　/*　Opacidad para IE8　y versiones inferiores　*/
　　　　zoom:　1;　　/*　Solución para IE7　*/
}

Transparencia de imágenes CSS

También puede usar CSS Opacity para crear imágenes transparentes.

Las tres imágenes en la siguiente imagen provienen del mismo origen. La única diferencia entre ellas es su transparencia.

Cambio de transparencia de la imagen al pasar el ratón

A continuación se muestra un ejemplo que ilustra el uso común de la transparencia de imágenes CSS, donde al mover el puntero del ratón sobre la imagen, la transparencia de la imagen cambia.

Mueva el puntero del ratón sobre la imagen para ver el efecto.

Texto en cuadro transparente

Al usar opacidad en un elemento, no solo el fondo del elemento tendrá transparencia, sino que todos sus elementos hijos también se volverán transparentes. Si el valor de opacidad aumenta, el texto dentro del elemento transparente se volverá difícil de leer.

Para evitar este problema, puede usar imágenes PNG transparentes o colocar el bloque de texto fuera de un cuadro transparente, luego usar un margen negativomargenoubicación CSSsucintamente dentro.

div {
　　　　float: left;
　　　　opacidad: 0.7;
　　　　borde:　1px sólido #949781;
}
p {
　　　　float: left;
　　　　position: relative;
　　　　margen-left:　-400px;
}

usar la transparencia de RGBA en CSS

Además de RGB, CSS3También se introduce un nuevo método RGBA para especificar un color que incluye la transparencia alpha como parte del valor del color. RGBA representa Rojo, Azul, Verde, Alpha.

La declaración RGBA es un método muy simple para establecer la transparencia del color.

div {
　　　　background: rgba(200,　54,　54, 0.5);
}
p {
　　　　color: rgba(200,　54,　54, 0.25);
}

los tres primeros números representan los valores RGB del color, es decir, rojo (0-255), verde (0-255), azul (0-255), el cuarto número representa el rango entre 0 y1valores de transparencia alpha entre (0 para que el color sea completamente transparente, y valores1haciéndolo completamente opaco).

Una característica importante que debe considerarse sobre la opacidad RGBA es-Capacidad para especificar la opacidad de un solo color. Con RGBA, podemos hacer que el color del texto del elemento sea transparente, manteniendo el fondo completo.

— o ignorar el color del texto, cambiando solo la transparencia del fondo.

Verá que usar RGBA permite especificar fácilmente un solo color en lugar de la opacidad del elemento completo. Sin embargo, siempre se recomienda definir un color de reserva para navegadores que no admiten colores RGBA.

Color de reserva declarado de RGBA

Todos los navegadores no admiten colores RGBA. Sin embargo, puede proporcionar otras opciones para navegadores que no lo admiten, como imágenes PNG de color puro o transparente.

p {
　　　　/*　Reemplazo para navegadores web que no admiten39;no soportan RGBA　*/
　　　　background: rgb(0, 0, 0);
　　　　/*　RGBa con 0.5　opacidad　*/
　　　　background: rgba(0, 0, 0, 0.5);
}