La propiedad opacidad en css (opacity)

La propiedad opacidad en css (opacity)

Print Friendly, PDF & Email
La propiedad opacidad en css (opacity)
5 (100%) 1 voto

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

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.