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

- Poner fondo a cualquier elemento con CSS
- Equivalencias en tamaños tipográficos (CSS)
- Usando CSS en tablas
- Distintos bordes de imágenes
- Integración de interfaz en CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento