Como utilizar el Opacity con CSS.

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

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

- Pseudo-elementos tipograficos
- Degradado con CSS Filter
- Hojas de estilo externas
- Cambiar el cursor del ratón con CSS
- wrapScroll: Desplazamiento automático de DIV’s con CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento