Escurecer a imagem de fundo em CSS

1. Use gradiente linear para escurecer a imagem de fundo em CSS
2. Use a propriedade background-blend-mode para escurecer a imagem de fundo em CSS

Neste artigo, apresentaremos alguns métodos para escurecer imagens de fundo em CSS.

Use gradiente linear para escurecer a imagem de fundo em CSS

Podemos usar o CSS Linear Gradient para escurecer a imagem de fundo em CSS. A função gradiente linear () cria um fundo com um gradiente linear. Um gradiente linear é uma transição suave entre pelo menos duas cores diferentes. A função leva um número incontável de parâmetros de cor. Podemos definir a direção do gradiente como o primeiro parâmetro. As opções das direções são to right, to left, to bottom right, 90deg, etc. Podemos aplicar o gradiente linear à imagem de fundo e definir a cor mais escura com opacidade para escurecer a imagem de fundo . Podemos usar a função rgba() na função linear-gradient() para definir as cores. Aqui, iremos apenas escurecer a imagem de fundo sem escurecer outros elementos.

Por exemplo, selecione o contêiner em CSS e use a propriedade abreviada background para definir o gradiente linear e a imagem de fundo. Escreva a função gradiente linear () e forneça as duas paradas de cor como rgba(0, 0, 0, 0.7). A seguir, use a função url() para definir uma imagem de fundo de sua escolha. Use as várias propriedades de fundo para colocar a imagem corretamente no fundo. Defina background-position para center, background-repeat para no-repeat e background-size para cover. Defina a altura para 100%. Certifique-se de selecionar as tags body e html e definir a altura como 100% e a margem como 0.

No exemplo abaixo, usamos rgba(0, 0, 0, 0.7) como as duas cores interrompidas. A função rgba(0, 0, 0) é igual à cor preta. O quarto valor é o valor da opacidade. O valor mais próximo de 1 torna mais escuro e vice-versa. Podemos ajustar o valor da opacidade de acordo com a necessidade de escurecer a imagem de fundo. Desta forma, podemos usar o gradiente linear para escurecer a imagem de fundo no CSS.

Código de exemplo:

<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;
}

Use a propriedade background-blend-mode para escurecer a imagem de fundo em CSS

Podemos usar a propriedade background-blend-mode para escurecer a imagem de fundo em CSS. A propriedade define o modo de mesclagem do fundo. Existem várias opções para esta propriedade. Algumas opções são , multiply, darken, lighten, saturation, etc. Podemos usar a opção darken para tornar a imagem de fundo mais escura. Podemos definir a cor da imagem de fundo usando a função rgba().

Por exemplo, selecione a id background no CSS e use a propriedade background para definir a cor e a imagem de fundo. Defina a cor como rgba(0, 0, 0, 0.7) e use uma imagem de espaço reservado na função url(). Use as diferentes propriedades de fundo como no primeiro método para definir a imagem corretamente. Em seguida, use a propriedade background-blend-mode e defina-a como escurecer.

Desta forma, podemos escurecer a imagem de fundo usando a propriedade background-blend-mode.

Código de exemplo:

#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>