La propiedad opacidad en css (opacity)

La opacidad es según la RAE la cualidad opaco o la falta de claridad transparencia.

Dicho de otro modo, la opacidad es el contrario de la transparencia por mucho que podamos pensar a priori.

En CSS es una propiedad que define el grado de no transparencia y que va de 1 a 0.

El valor 1 es nada transparente y el valor 0 es completamente transaparente.

Ejemplo de uso del valor opacity

A continuación se observa una escala de color conseguida mediante la propiedad opacidad de css3.

El código usado para los ejemplos es el siguiente:

<div class="opacity-1"><p>valor de opacidad 0.1</p></div>
	<div class="opacity-2"><p>valor de opacidad 0.2</p></div>
	<div class="opacity-3"><p>valor de opacidad 0.3</p></div>
	<div class="opacity-4"><p>valor de opacidad 0.4</p></div>
	<div class="opacity-5"><p>valor de opacidad 0.5</p></div>
	<div class="opacity-6"><p>valor de opacidad 0.6</p></div>
	<div class="opacity-7"><p>valor de opacidad 0.7</p></div>
	<div class="opacity-8"><p>valor de opacidad 0.8</p></div>
	<div class="opacity-9"><p>valor de opacidad 0.9</p></div>
	<div class="opacity-10"><p>valor de opacidad 1</p></div>

*{box-sizing:border-box;margin:0;padding:0;}
[class*="opacity"]{background-color:#252525;color:#fff;}
div{padding:16px;}
p{font-size:18px;}
.opacity-1{opacity:.1;}
.opacity-2{opacity:.2;}
.opacity-3{opacity:.3;}
.opacity-4{opacity:.4;}
.opacity-5{opacity:.5;}
.opacity-6{opacity:.6;}
opacity-7{opacity:.7;}
.opacity-8{opacity:.8;}
.opacity-9{opacity:.9;}
.opacity-10{opacity:1;}

La propiedad opacity se hereda

Las cajas anidadas dentro de una etiqueta que lleve la propiedad opacity la heredan y además no pueden tener un valor superior.

Esto significa que si hay textos puede haber problemas de legibilidad.

Si no quieres que un texto tenga opacidad entonces debes usar los colores RGBa.¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!