Opacity en CSS

En esta ocasión mostraré un efecto bastante simpático que podemos aplicar en capas, imágenes, formularios, etc… Este efecto consiste en manejar la propiedad opacity que permite manejar la opacidad de los objetos y con ello se puede conseguir que una imagen se haga transparente.

La propiedad opacity funciona tanto en Internet Explorer como en Firefox:

IE:

filter: alpha(opacity=50)

Firefox:

opacity: .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>

Usuarios que han visto este tema también han visto...

- Alternando Hojas de Estilo
- Cómo cambiar la apariencia de un botón en CSS
- Fondo para campos textarea en CSS
- Menú de imágenes con CSS
- Cómo solucionar problemas en CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento