Como escurecer imagem usando CSS?

Olá, seja muito bem vindo(a), no artigo de hoje vamos construir um banner simples, mas o principal aqui será aprender a escurecer a imagem com uma cor preta transparente. Primeiro criamos uma div no nosso HTML com a classe banner nesse exemplo.

<div class="banner"></div>

Após isso, no nosso CSS teremos um background para adicionar nossa imagem na div, nesse ponto que entra o preto transparente. antes de colocar a imagem colocamos um linear-gradient cor duplicada e depois passamos o url da imagem. Para ficar mais visível nesse tutorial eu adicionei aumentei o tamanho da div para poder ver a imagem escurecida melhor. 

.banner {
 background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("https://pbs.twimg.com/media/Ev8SpLeWgAIbYeG.jpg");
 height: 30rem;
}

Não apenas o preto, você pode colocar outras cores dependendo do projeto em que estiver fazendo. Um abraço e até a próxima.

Artigo Original: https://francileudo-frontend.blogspot.com/2022/10/como-escurecer-imagem-usando-css.html