Cómo atenuar una imagen en CSS

La atenuación de una imagen hace que sea más difícil de ver, pero ese puede ser el efecto que está buscando. Una imagen oscura se vuelve menos prominente en una página web y atrae menos atención que los objetos que la rodean. Puede atenuar la imagen de una playa soleada, por ejemplo, para atraer la atención de un usuario a un menú debajo de la imagen. No es necesario crear varias imágenes para producir este efecto de atenuación. Las hojas de estilo en cascada, o CSS, pueden realizar este truco usando unas pocas líneas de código.

CSS

CSS es un lenguaje que los diseñadores de sitios usan para definir la apariencia de los objetos en las páginas web. Estos atributos, como el color y la opacidad, tienen valores como se muestra en el siguiente ejemplo: .redBorder {border-color: red; estilo de borde: sólido;}

Este código crea una clase CSS llamada redBorder. Si una de sus etiquetas img HTML hace referencia a esta clase, los visitantes del sitio ven un borde rojo sólido alrededor de la imagen cuando la ven en su página web. El código HTML que hace referencia a esta clase tiene el siguiente aspecto y el borde rojo se puede eliminar eliminando la referencia de clase en esta etiqueta img:

Opacidad de CSS

Al alterar la opacidad de una imagen usando CSS, la atenúas. El código que se muestra a continuación crea una clase llamada opacidad 40 que define valores de opacidad del 40 por ciento: .opacidad40 {filtro: alfa (opacidad = 40);

opacidad: 0, 4; }

El atributo de filtro de la clase usa una escala de opacidad entre 0 y 100, y su atributo de opacidad tiene una escala de opacidad con valores que van de 0 a 1. El uso de ambos atributos garantiza que todos los navegadores puedan cambiar la opacidad de su imagen. Agrega esta referencia de clase a una imagen para atenuarla. También puede crear una clase llamada "opacity100" y configurar sus valores para que la opacidad de la imagen sea del 100 por ciento. Esa clase haría la imagen opaca.

Oscurecimiento programático

Su página web puede mostrar una imagen atenuada cuando los usuarios la abren, o su código puede ocasionar que la imagen se atenúe más tarde después de que se cargue la página. Para hacer que la imagen se oscurezca inicialmente, establezca su opacidad a un valor más bajo, como se describió anteriormente. Para atenuar la imagen a medida que se ejecuta su aplicación, cambie el nombre de la clase que define la opacidad de la imagen como se muestra en el siguiente ejemplo: var imageObject = document.getElementById ("image1"); imageObject.className = "opacity40";

Este código, que aparece dentro de una función de JavaScript, obtiene una referencia a la imagen y cambia su nombre de clase a "opacity40". Los usuarios pueden hacer clic en un botón que ejecuta la función de JavaScript, o su código puede llamarlo en cualquier momento.

Consideraciones

La función de JavaScript necesita el valor de identificación de la imagen que desea atenuar si desea cambiar su opacidad dinámicamente. La identificación de la imagen en el ejemplo descrito anteriormente es "image1". Si tiene varias imágenes para atenuar, deles valores de identificación únicos y páselos a la función que realiza el cambio de opacidad. Cree tantas clases de CSS como desee que definan diferentes grados de opacidad. Luego, puede atenuar una imagen en cualquier grado cambiando su referencia de clase en la función JavaScript.