Característica de Opacity en CSS

por
CSS opacity

Tabla de contenidos

La propiedad opacity en CSS determina el grado de transparencia de un elemento, es decir, qué tan visible es el contenido detrás de él.

Funciones y aplicaciones de opacity

Valor por defecto1.0
Aplicado aTodos los artículos.
HeredableNo
Móvilsí
Valor de operaciónEl valor de operatividad dentro del rango de 0 a 1.
/* opaco */ 
opacidad :  1 ; 
opacidad :  1 . 0 ;

/* translúcido */ 
opacidad :  0 . 6 ;

/* totalmente transparente */ 
opacidad :  0 ; 
opacidad :  0 . 0 ;

/* valores globales */ 
opacidad :  inherit; 
opacidad :  initial; 
opacidad :  unset;

La propiedad se aplica opacity al elemento como un todo, incluido el contenido, incluso si el valor de esa propiedad no es heredable de los child. Por tanto, el elemento y todos sus child tendrán la misma transparencia. Si no desea aplicar transparencia a los elementos secundarios, utilice la propiedad en su background en su lugar como en el siguiente ejemplo:

background :  rgba ( 0,  0,  0,  0.5) ;

Ejemplos del uso de opacity

A continuación veremos un ejemplo muy simple de la característica del uso de opacity.

Un ejemplo simple de elementos cuyo <div> fondo es rojo, y se diferencian entre sí por el valor de transparencia al aplicarles la propiedad opacity:

div  { 
  color background :  #308a40 ; 
  color :  red; 
}
.light  { 
  /* El texto apenas se puede ver */
  opacity :  0.3;   
} 
.medium  { 
  /* El texto se puede ver con relativa claridad */
  opacity :  0,6;   
} 
.heavy  { 
  /* El texto es muy claro */
  opacity :  0,9;   
}

Aplicación de código HTML:

<div  class = "light" > Muy difícil de leer este texto </div> 
<div  class = "medium" > Se puede distinguir más fácil el texto </div> 
<div  class = "heavy" > Esta muy fácil de leer el texto </div>

Cambiar la transparencia cuando se coloca el mouse sobre el elemento. Un ejemplo de cómo cambiar la transparencia al ‎:hover pasar el mouse ( ) sobre el elemento <img>:

img.opacity { 
  opacity: 1; 
}
 
img.opacity:hover { 
  opacity: 0.6; 
}

Aplicación en código HTML:

< img  src = "bigcode-logo.png"  alt = "Logotipo de bigcode"  class = "opacity" >

Soporte en navegadores por opacity

CaracterísticaChromeFirefoxInternet ExplorerÓperaSafari
Soporte Principal 1.0 1.0 9.0 9.0 1.2

Funcionamiento general de opacity

La propiedad acepta opacity un valor único que especifica el nivel de transparencia.

<number>

Este valor numérico que utiliza opacity van de un rango de 0.0 a 1.0, esto otorgara el nivel de transparencia del canal alfa, y cualquier valor fuera del rango permitido se redondeará a su extremo más cercano.

  • Con el valor 0 significa que el elemento es completamente transparente, lo cual significa que no es visible por el usuario.
  • Cualquier número <number> entre 0.0 y 1.0 significa que el elemento es translúcido, se puede ver su contenido y el contenido debajo del mismo.
  • El valor 1 significa que el elemento es totalmente visible.

Estructura de uso

opacity :  < número >;