Opacidad - Trucos CSS | Almanaque CSS 2024

La opacitypropiedad en CSS especifica qué tan transparente es un elemento.

Uso básico:

div ( opacity: 0.5; )

La opacidad tiene un valor inicial predeterminado de 1 (100% opaco). La opacidad no se hereda, sino porque el padre tiene una opacidad que se aplica a todo lo que contiene. No puede hacer que un elemento hijo sea menos transparente que el padre, sin algunos trucos. Los valores son un número de 0 a 1 que representa la opacidad del canal (el canal "alfa"). Cuando un elemento tiene un valor de 0, el elemento es completamente invisible; un valor de 1 es completamente opaco (sólido).

¡Mira este bolígrafo!

Compatibilidad con IE

Si desea que la opacidad funcione en todas las versiones de IE, el orden debe ser el siguiente:

.opaque ( /* Theoretically for IE 8 & 9 (more valid) */ /*… but not required as filter works too */ /* should come BEFORE filter */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8 /* This works in IE 8 & 9 too */ /*… but also 5, 6, 7 */ filter: alpha(opacity=50); // IE 5-7 /* Modern Browsers */ opacity: 0.5; )

Si no usa este orden, IE8-as-IE7 no aplica la opacidad, aunque IE8 y un IE7 puro sí lo hacen.

Nota sobre contextos de apilamiento

Si opacityse coloca un elemento con y un valor menor que 1, la z-indexpropiedad se aplica como se describe en CSS2.1, excepto que el autovalor se trata como 0 ya que siempre se crea un nuevo contexto de apilamiento.

La opacidad se puede utilizar como alternativa a la visibilitypropiedad: visibility: hidden;es como opacity: 0;.