Opacidad de imagenes con CSS

La opacidad en una imagen CSS es un valor que nos hace la imagen “transparente” dependiendo del valor que le agreguemos, es algo parecido a lo que hacemos con nuestro photoshop. Con esta guia vamos a aprender a usar este valor tanto en Internet Explorer como en Mozilla Firefox.

Probar el Resultado

Paso 1

Primero que nada debes tener la imagen a la que quieres agregar la opacidad, insertala normalmente desde tu dreamweaver o Front Page y agregale el class que quieras, por ejemplo algo asi:

1

<img src="http://tuweb.com/imagen.png" alt="imagen" class="imagen-opacidad" />

Paso 2

Ve al estilo de tu pagina y agregale la propiedad opacity a tu class de la siguiente manera:

1
2
3

.imagen-opacidad {
opacity: .7;
}

Este número lo que hace es agregarle una opacidad de 70%, es decir si le colocas el valor: .5, la opacidad será de 50%. Con este estilo tu opacidad sera vista en Mozilla firefox, para que tambien sea vista en Internet Explorer, vamos a usar los Comentarios Condicionales.

Paso 3

Crea una nueva hoja de estilos css llamada internet-explorer (internet-explorer.css) y agrega la siguiente linea:

1
2
3

.imagen-opacidad {
filter: alpha(opacity=70);
}

El número 70 nos dice que el objeto va a tener una opacidad de 70%.

Paso 4

Una vez guardes la nueva hoja de estilos, agrega el siguiente Comentario condicional al archivo HTML donde se encuentra tu imagen.

1
2
3

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="internet-explorer.css" />
<![endif]-->

Eso es todo, ahora debes tener tu imagen con opacidad tanto en internet explorer como en Mozilla Firefox.

Extra

Este efecto es muy bueno para hacer que una imagen se vuelva mas nitida al pasar el mouse sobre ella, para ello debemos agregarle la propiedad “:hover” a nuestro class tanto en el css de firefox como el css de Internet Explorer.

CSS FIREFOX:

1
2
3
4
5

.imagen-opacidad {
opacity: .8;}
.imagen-opacidad:hover {
opacity: .5;
}

CSS INTERNET EXPLORER:

1
2
3
4
5
6

.imagen-opacidad {
filter: alpha(opacity=50);
}
.imagen-opacidad:hover {
filter: alpha(opacity=80);
}

Mijael es el creador y editor de skyandstars.net donde publica guias y tutoriales sobre WordPress, Cutenews, PHP, HTML y mucho más. Acutalmente estudiante universitario.

Mijael166

Quizas alguna de estas entradas te pueda interesar

• Cambiar color de fondo de web Dinamicamente
• CSS Para principiantes (Capitulo 1)
• Ajustar pagina web a todas las Resoluciones
• Comentarios Condicionales en Internet Explorer
• Degradados en Photoshop

6 Comentarios en "Opacidad de imagenes con CSS"

1. 

   jorge

   22 Junio 2009

   Respuesta

   no funciona en internet exporer

2. 

   Mijael166

   26 Junio 2009

   Respuesta

   Si funciona….que version de internet explorer estas usando?..funciona para la 7 en adelante..

3. 

   maisa

   3 Julio 2009

   Respuesta

   que facil!, pense qe tenia mas ciencia xD

4. 

   maisa

   3 Julio 2009

   Respuesta

   hey mijael, en algunos sitios he visto que tienen una imagen en blanco y negro y al pasar sobre ella se torna a color, sabes como hacer eso?

5. 

   Mijael166

   3 Julio 2009

   Respuesta

   sip…eso es javascript…tendrias que buscar un codigo para hacerlo….con CSS no se puede :(

6. 

   Maddie

   8 Agosto 2009

   Respuesta

   pienso igual se ve dificil de hacer, i no tiene ciencia e_e xD