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

- Poner fondo a cualquier elemento con CSS
- Barra de desplazamiento a la izquierda con CSS
- Cambiar el cursor del ratón con CSS
- Decorar un campo select de formulario con CSS
- Pseudoclases de CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento