Explicamos como hacer efectos de transparencia, cambiando la opacidad de elementos como capas, formularios e imágenes entre otros.
En esta ocasión mostraré un efecto bastante simpático que podemos aplicar en capas, imágenes, formularios, etc
La propiedad opacity funciona tanto en Internet Explorer como en Firefox:
IE:
filter: alpha(opacity=50)
Firefox:
opacity: .5
Mozilla:
-moz-opacity:0.5
El siguiente ejemplo funciona en los dos navegadores:
<style type=text/css>
.ejemplo {width: 100%; background-color: red}
.opaco {filter: alpha(opacity=50); opacity: .5}
</style>
<p class="ejemplo">Ejemplo sin opacity.</p>
<p class="ejemplo opaco">Ejemplo con opacity a 50%.</p>
<p><img src="imagen.gif" width="100" height="109"><img src="imagen.gif" class="opaco" width="100" height="109"></p>
Ver ejemplo en marcha
La propiedad opacity funciona tanto en Internet Explorer como en Firefox:
IE:
filter: alpha(opacity=50)
Firefox:
opacity: .5
Mozilla:
-moz-opacity:0.5
El siguiente ejemplo funciona en los dos navegadores:
<style type=text/css>
.ejemplo {width: 100%; background-color: red}
.opaco {filter: alpha(opacity=50); opacity: .5}
</style>
<p class="ejemplo">Ejemplo sin opacity.</p>
<p class="ejemplo opaco">Ejemplo con opacity a 50%.</p>
<p><img src="imagen.gif" width="100" height="109"><img src="imagen.gif" class="opaco" width="100" height="109"></p>
Ver ejemplo en marcha
Referencia: Os dejamos un link a otro artículo de DesarrolloWeb.com donde se ofrecen explicaciones adicionales y actualizadas sobre cómo crear transparencia con CSS.
Federico Elgarte