Background più scuro tramite CSS

← CSS

fonte: https://linuxhint.com/different-methods-to-darken-background-image-css/

Method 1: Use “filter” Property to Darken Background Image in CSS

In CSS, the “filter” property is utilized to add graphical effects on HTML elements, especially on images. This property can also help in darkening the background image when its “brightness” value is added.

In the first step, we will use the “background” property with the value “url()” to set the background image; declaring the “no-repeat” will not let the image repeat several times. Then, “padding” of “15%” will be used to give the specific space to our container. Lastly, using the “filter” property and setting its value to “brightness(40%)” will reduce the light pouring on the image and make it darken:

<style>
div {
   background: url(boats.jpg) no-repeat;
   filter: brightness(40%);
}
</style>

Method 2: Use “background” Property to Darken Background Image in CSS

The “background” property can be utilized to set the background image, its color, size, and position on the web page. In other words, using background property, you can apply almost all properties of a background image at once.

We will now use the “background” property with the value “linear-gradient()” and place two values with the rgba color scheme inside them. This will create a grey transparency shade over the image and make it darken:

<style>
div {
   background: linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)), url(boats.jpg) no-repeat;
}
</style>

Method 3: Use “background-blend-mode” Property to Darken Background Image in CSS

The “background-blend-mode” property is useful when the color and an Image exist together in the same place. This property is utilized to mix the layers of images with the background color. Also, it will darken the background image with a specific value.

First, set the background color “grey” for the container using the “background-color” property. In the next step, use the value “multiply” along the property “background-blend-mode”. This will blend the image and mix its layer with the background:

<style>
div {
   background: url(boats.jpg) no-repeat;
   background-color: grey;
   background-blend-mode: multiply;
}
</style

Note: If there’s no background color behind your image, background-blend-mode property will not work. Moreover, if the background color is not greyish or blackish type, you may not achieve the desired result:

Conclusion

To darken the background image, you can use the “filter”, “background”, or “background-blend-mode” property. The filter property decreases the brightness level to darken the background image. Background property gives the grey or blackened transparency shade over the image to darken the image, whereas background-blend-mode mixes the background color with the image to make it darken. In this blog, the three efficient methods have been used for setting a darken background image in CSS.