Métodos diferentes para escurecer a imagem de fundo no CSS

Sem dúvida, imagens de fundo aprimoram a aparência de uma página da web. No entanto, se as imagens adicionadas forem muito brilhantes e tiverem efeitos multicoloridos, eles podem fazer com que uma página pareça pouco atraente, e o usuário se sentirá desconfortável. Em um cenário semelhante, a melhor opção é escurecer as imagens adicionadas.

Você tem que baixar as imagens e editá -las no Photoshop? Absolutamente não! Diferentes propriedades CSS podem atendê -lo para o propósito especificado.

Neste artigo, explicaremos os vários métodos para escurecer imagens de fundo usando CSS.

Como escurecer a imagem de fundo em CSS?

Confira as propriedades listadas abaixo para escurecer as imagens de fundo usando CSS.

• Propriedade do filtro
• propriedade de fundo
• Propriedade de Backment-Blend Mode

Vamos explorar cada método um por um!

Método 1: Use a propriedade "filtro" para escurecer a imagem de fundo no CSS

No CSS, o “filtro”A propriedade é utilizada para adicionar efeitos gráficos nos elementos HTML, especialmente nas imagens. Esta propriedade também pode ajudar no escurecimento da imagem de fundo quando é “brilho”O valor é adicionado.

Veja o exemplo dado para verificar o procedimento para escurecer a imagem de fundo usando a propriedade CSS Filter.

Exemplo

Neste exemplo, escureceremos a seguinte imagem de fundo:

Na primeira etapa, usaremos o “fundo”Propriedade com o valor“url ()”Para definir a imagem em segundo plano; declarando o “sem repetir”Não deixará a imagem repetir várias vezes. Então, "preenchimento" de "15%”Será usado para dar o espaço específico ao nosso contêiner. Por fim, usando o “filtro”Propriedade e definindo seu valor como“brilho (40%)”Reduzirá a luz derramando a imagem e a fazer escurecer:

Salve o código adicionado no arquivo html e simplesmente abra -o no navegador ou use o “Servidor vivoExtensão para o mesmo objetivo:

Como você pode ver, a imagem de fundo foi escurecida usando a propriedade CSS Filter:

Método 2: Use a propriedade “Background” para escurecer a imagem de fundo no CSS

O "fundo”A propriedade pode ser utilizada para definir a imagem de fundo, sua cor, tamanho e posição na página da web. Em outras palavras, usando a propriedade em segundo plano, você pode aplicar quase todas as propriedades de uma imagem de fundo de uma só vez.

Exemplo

Agora vamos usar o “fundo”Propriedade com o valor“Gradiente linear()”E coloque dois valores com o esquema de cores RGBA dentro deles. Isso criará um tom de transparência cinza sobre a imagem e a escurecerá:

Saída

Agora, aprenda sobre a propriedade de Backment-Blend Mode no próximo método.

Método 3: Use a propriedade “Background Blend Mode” para escurecer a imagem de fundo no CSS

O "Background-Brend-Mode”A propriedade é útil quando a cor e uma imagem existem juntas no mesmo lugar. Esta propriedade é utilizada para misturar as camadas de imagens com a cor de fundo. Além disso, escurecerá a imagem de fundo com um valor específico.

Exemplo

Primeiro, defina a cor de fundo “cinza”Para o contêiner usando o“cor de fundo" propriedade. Na próxima etapa, use o valor “multiplicar"Ao longo da propriedade"Background-Brend-Mode”. Isso misturará a imagem e misturará sua camada com o fundo: