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>

Próxima entrada