La propiedad opacidad en css (opacity)

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.

escala cromatica #ff0064 modificando opacidad
escala cromatica #ff0064 modificando opacidad
escala cromatica #252525 modificando opacidad
escala cromatica #252525 modificando opacidad

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!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.