La propiedad Opacity en CSS3
Por Aitor López de Aberasturi el Jueves, 04 de Septiembre de 2014 0 Comentarios
La propiedad pacity representa la opacidad o transpariencia de un elemento. Puede tener los valores inherit o un valor que puede ir del 0.0 (totalmente transparente) al 1.0 (totalmente opaco).
Ejemplo
Superponemos dos capas y a la del nivel superior le damos opacidad 0.5
<div style="position:absolute;left:0;top:0px;z-index:1; background-color:red; width:200px; height:100px;">Capa de fondo </div> <div style="position:absolute;left:40;top:40px;z-index:2; background-color:blue width:200px; height:100px; opacity:0.5;">Capa con opacidad 0.5</div>
Se pueden utilizar los prefijos -moz- y -webkit- para que versiones de firefox y chrome visualicen correctamente.
opacity:0.5; -webkit-opacity:0.5; -moz-opacity: 0.5;
Ejemplo:
Damos diferentes valores de opacidad a los párrafos.
<p style="opacity:0">P&aacte;rrafo con opacidad 0</p> <p style="opacity:0.2">Párrafo con opacidad 0.2</p> <p style="opacity:0.4">Párrafo con opacidad 0.4</p> <p style="opacity:0.6">Párrafo con opacidad 0.6</p> <p style="opacity:0.8">Párrafo con opacidad 0.8</p> <p style="opacity:1">Párrafo con opacidad 1</p>