2 min de lectura

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:

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:

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:

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:

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:

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.

Compartir
Estudiante de Ingenieria en Computacion en el Centro Universitario de Ciencias Exactas e Ingenierias, estudiando actualmente el septimo semestre de la carrera.

Deja tus comentarios

This site uses Akismet to reduce spam. Learn how your comment data is processed.