Elementos transparentes con CSS

Es posible volver elementos transparentes con CSS utilizando la propiedad opacity. En caso de que se desee solo el color de fondo transparente y las letras o bordes opacos se ultiliza los colores rgba. El grado de tranparencia se puede regular segun se desee.

Ejemplo:

Imagen transparente utilizando la propiedad opacity

<style>
img.trans_imagen {
opacity:0.5;
}
</style>

<img class="trans_imagen" src="img/gato.jpg" />

Div transparente utilizando la propiedad opacity. 

*Nota: Cuando se utiliza la propiedad opacity para dar transparencia a un div todos los elementos y  propiedades relacionados al div tambien se haran trasparentes.

<style>
div.imagen_fondo {
border:2px solid #CCC;
width: 500px;
height: 300px;
background: url(img/gato.jpg) repeat;
}

div.trans_div {
opacity:0.3;
background-color: white;
font-color: #FFF;
font-size: 39px;
text-align:center;

}
</style>

<div class="imagen_fondo">
<div class="trans_div">
<p>
GATO
</p>
</div>
</div>

Div transparente con letras y/o bordes opacos

Para esto se utilizan los colores rgba en vez de la propiedad opacity.

<style>
div.imagen_fondo {
border:2px solid #CCC;
width: 500px;
height: 300px;
background: url(img/gato.jpg) repeat;

}

div.letras_opacas_div {
background: rgba(255, 255, 255, 0.3);
font-color: #FFF;
font-size: 39px;
text-align:center;

}
</style>

<div class="imagen_fondo">
<div class="letras_opacas_div">
<p>
GATO
</p>
</div>
</div>