Oscurecer la imagen de fondo en CSS

1. Utilice degradado lineal para oscurecer la imagen de fondo en CSS
2. Utilice la propiedad background-blend-mode para oscurecer la imagen de fondo en CSS

En este artículo, presentaremos algunos métodos para oscurecer las imágenes de fondo en CSS.

Utilice degradado lineal para oscurecer la imagen de fondo en CSS

Podemos usar el degradado lineal CSS para oscurecer la imagen de fondo en CSS. La función linear-gradient() crea un fondo con un degradado lineal. Un degradado lineal es una transición suave entre al menos dos colores diferentes. La función toma una innumerable cantidad de parámetros de color. Podemos establecer la dirección del gradiente como primer parámetro. Las opciones de las direcciones son to right, to left, to bottom right, 90deg, etc. Podemos aplicar el degradado lineal a la imagen de fondo y establecer el color más oscuro con opacidad para oscurecer la imagen de fondo. Podemos usar la función rgba() en la función linear-gradient() para configurar los colores. Aquí, solo oscureceremos la imagen de fondo sin oscurecer otros elementos.

Por ejemplo, seleccione el contenedor en CSS y use la propiedad abreviada background para establecer el degradado lineal y la imagen de fondo. Escriba la función linear-gradient() y asigne las dos paradas de color como rgba(0, 0, 0, 0.7). A continuación, utilice la función url() para establecer una imagen de fondo de su elección. Utilice las distintas propiedades de fondo para colocar la imagen correctamente en segundo plano. Establece background-position en center, background-repeat en no-repeat, y background-size en cover. Establezca la altura en 100%. Asegúrese de seleccionar las etiquetas body y html y establezca la altura en 100% y el margen en 0.

En el siguiente ejemplo, usamos rgba(0, 0, 0, 0.7) como las dos paradas de color. La función rgba(0, 0, 0) es igual al color negro. El cuarto valor es el valor de opacidad. El valor más cercano a 1 lo hace más oscuro y viceversa. Podemos ajustar el valor de opacidad según la necesidad de oscurecer la imagen de fondo. De esta forma, podemos utilizar el degradado lineal para oscurecer la imagen de fondo en CSS.

Código de ejemplo:

<div id="background"></div>

body, html {
    height: 100%;
    margin: 0;
}

#background {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://loremflickr.com/320/240');
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Utilice la propiedad background-blend-mode para oscurecer la imagen de fondo en CSS

Podemos usar la propiedad background-blend-mode para oscurecer la imagen de fondo en CSS. La propiedad establece el modo de fusión del fondo. Hay varias opciones para esta propiedad. Algunas opciones son normal, multiply, darken, lighten, saturation, etc. Podemos utilizar la opción darken para oscurecer la imagen de fondo. Podemos establecer el color de la imagen de fondo usando la función rgba().

Por ejemplo, seleccione la identificación background en CSS y use la propiedad background para establecer el color y la imagen de fondo. Establezca el color como rgba(0, 0, 0, 0.7) y use una imagen de marcador de posición en la función url(). Utilice las diferentes propiedades de fondo como en el primer método para configurar la imagen correctamente. A continuación, utilice la propiedad background-blend-mode y establézcala en darken.

De esta forma, podemos oscurecer la imagen de fondo usando la propiedad background-blend-mode.

Código de ejemplo:

#background {
    background: rgba(0, 0, 0, 0.7) url('https://loremflickr.com/320/240');
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: darken;
}

<div id="background"></div>