Opacidad en CSS
Cuando se desea trabajar la opacidad en CSS o la transparencia en la hoja de estilos, utilizamos la propiedad de opacidad (opacity).
La opacidad con CSS puede emplearse de dos formas: con opacity o con filtros.
Opacity opacidad en css
La sintaxis o forma de utilizar esta propiedad es de la siguiente manera:
|
1 2 3 |
#elemento { opacity: valor entre 0 y 1; } |
Para definir la transparencia, primero introduciremos un valor entero que se encuentre entre 0 y 1.
Segundo decidimos si queremos que sea completamente transparente ingresamos un valor cercano a 0.
Finalmente lo introducimos en nuestro código.
Este seria un ejemplo:
|
1 2 3 |
#imagen { opacity: 0.2; } |
Como consecuencia, la imagen se encuentra muy transparente.
Y también, por otro lado, si quieres que la imagen sea mas opaca introduciremos un numero cercano a 1.
Este es el código de ejemplo:
|
1 2 3 |
#imagen { opacity: 0.9; } |
Puedes ver que esta muy opaco, casi no deja pasar la luz.
Puede utilizarse en las etiquetas div y en imágenes img.
Los navegadores que soportan esta propiedad son:
*Firefox desde la versión 0.9 en adelante.
*Safari desde la versión 2 en adelante.
*Google Chrome desde cualquiera de sus versiones.
*Opera desde la versión 9 en adelante
*Y por ultimo Internet Explorer desde la versión 9 en adelante.
Esta propiedad no funciona en Internet Explorer 7 o versiones anteriores.
Filter
Existe una propiedad llamada filtros, los cuales nos permiten usar esta característica en dichos navegadores.
En este enlace podrás aprender mas acerca de lo mencionado previamente, lo cual te ayudara en tu aprendizaje.
La forma de utilizarlos seria la siguiente:
|
1 2 3 |
#imagen { filter: alpha(opacity=50); } |
En este caso, el filtro que utilizaremos es alpha.
Los rangos de dicho filtro no van de 0 a 1, si no que va desde 0 hasta 100.
Si se desea utilizar esta propiedad, y ser compatible con todos los navegadores, se implementaría de la siguiente manera:
|
1 2 3 4 |
#imagen { opacity: 0.5; filter: alpha(opacity=50); } |
De esta forma, podrás utilizar esta propiedad en cualquier navegador sin ningún problema.
Puedes crear diferentes estilos para todas las imágenes que tengas en pagina y probablemente te diviertas.
Aquí te dejo el enlace de la documentación donde podrás ver mas a fondo esta propiedad.
Si desea practicar esta propiedad te invito a que le des clic a la siguiente imagen o al siguiente enlace.
