Como escurecer imagem usando CSS?
- #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
Show!
Uma outra (para escurecer) que pode ser interessante é: filter: grayscale.
Seguindo com um exemplo parecido:
E no CSS:
Resultado:
DB
Otimo artigo, bom conteúdo direto ao ponto.