La propiedad opacidad en css (opacity)

La propiedad opacidad en css (opacity)

5
(1)

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!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 5 / 5. Votos: 1

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

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 Comments

Post A Comment