Diferentes métodos para oscurecer la imagen de fondo en CSS

Sin duda, las imágenes de fondo mejoran la apariencia de una página web. Sin embargo, si las imágenes agregadas son muy brillantes y tienen efectos multicolor, entonces pueden hacer que una página se vea poco atractiva, y el usuario se sentirá incómodo. En un escenario similar, la mejor opción es oscurecer las imágenes adicionales.

¿Tienes que descargar las imágenes y editarlas en Photoshop?? Absolutamente no! Las diferentes propiedades de CSS pueden servirle para el propósito especificado.

En este artículo, explicaremos los diversos métodos para oscurecer las imágenes de fondo utilizando CSS.

Cómo oscurecer la imagen de fondo en CSS?

Echa un vistazo a las propiedades que cotizan en la lista para oscurecer las imágenes de fondo usando CSS.

• propiedad de filtro
• propiedad de fondo
• Propiedad de modo de mezcla de antecedentes

Exploremos cada método uno por uno!

Método 1: Use la propiedad "Filtro" para oscurecer la imagen de fondo en CSS

En CSS, el "filtrarLa propiedad se utiliza para agregar efectos gráficos en los elementos HTML, especialmente en las imágenes. Esta propiedad también puede ayudar a oscurecer la imagen de fondo cuando es "brilloSe agrega el valor.

Mire el ejemplo dado para verificar el procedimiento para oscurecer la imagen de fondo utilizando la propiedad del filtro CSS.

Ejemplo

En este ejemplo, oscureceremos la siguiente imagen de fondo:

En el primer paso, usaremos el "fondo"Propiedad con el valor"url ()"Para establecer la imagen de fondo; declarando el "sin repetición"No dejará que la imagen se repita varias veces. Entonces, "relleno" de "15%"Se utilizará para dar el espacio específico a nuestro contenedor. Por último, usando el "filtrar"Propiedad y establecer su valor en"brillo (40%)"Reducirá la luz que vierte sobre la imagen y la hará oscurecer:

Guarde el código agregado en el archivo HTML y simplemente ábralo en el navegador o use el "Servidor en vivo"Extensión para el mismo propósito:

Como puede ver, la imagen de fondo se ha oscurecido utilizando la propiedad del filtro CSS:

Método 2: Use la propiedad de "fondo" para oscurecer la imagen de fondo en CSS

El "fondoLa propiedad se puede utilizar para establecer la imagen de fondo, su color, tamaño y posición en la página web. En otras palabras, utilizando la propiedad de fondo, puede aplicar casi todas las propiedades de una imagen de fondo a la vez.

Ejemplo

Ahora usaremos el "fondo"Propiedad con el valor"gradiente lineal()"Y coloque dos valores con el esquema de color RGBA dentro de ellos. Esto creará un tono de transparencia gris sobre la imagen y lo hará oscurecer:

Producción

Ahora, aprenda sobre la propiedad de modo de mezcla de fondo en el siguiente método.

Método 3: Use la propiedad de "Modo de mezcla de fondo" para oscurecer la imagen de fondo en CSS

El "en segundo plano de mezclaLa propiedad es útil cuando el color y una imagen existen juntos en el mismo lugar. Esta propiedad se utiliza para mezclar las capas de imágenes con el color de fondo. Además, oscurecerá la imagen de fondo con un valor específico.

Ejemplo

Primero, establezca el color de fondo "gris"Para el contenedor usando el"color de fondo" propiedad. En el siguiente paso, use el valor "multiplicar"A lo largo de la propiedad"en segundo plano de mezcla". Esto combinará la imagen y mezclará su capa con el fondo: