25.01.2025

Como Escurecer uma Imagem de Fundo em CSS Sem Criar uma Nova Div

Resposta Rápida

Se você precisa escurecer rapidamente uma imagem de fundo usando CSS, aplique um pseudo-elemento ::after semitransparente:

.seu-elemento::after {
  content: '';
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0.6); /* Este é o efeito de escurecimento. Você pode ajustar sua intensidade... */
  width: 100%;
  height: 100%;
}

Use o canal alfa em rgba para controlar o nível de escurecimento. Certifique-se de definir a propriedade position do elemento pai como relative.

Detalhes

Uma Nova Abordagem: Camadas de Gradiente

Para um ajuste mais fino, é conveniente usar gradientes lineares do CSS3. Crie um gradiente com as mesmas cores de início e fim; ele sobreporá a imagem:

.seu-elemento {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('sua-imagem.png');
}

Neste caso, a transparência também é ajustada via rgba para alcançar o nível de escurecimento desejado.

Cores de Reserva e Transparência

Combinar rgba e gradientes nos permite controlar a transparência da imagem. Se a imagem principal não carregar por algum motivo, uma cor de reserva será utilizada:

.seu-elemento {
  background-color: cinza; /* Este é o Plano B em caso de problemas */
  /* ...outras estilos... */
}

Ajuste da Imagem: Posicionamento e Dimensões

Para garantir que a imagem seja exibida corretamente em diferentes dispositivos, ajuste background-position e background-size. Isso ajudará a alinhar a imagem com a sobreposição.

Atreva-se a Escolher Soluções Não Convencionais

● Trabalhando com Imagens: Filtros CSS

Usar o filtro brightness() no .seu-elemento permite ajustar a escuridão da imagem:

.seu-elemento {
  filter: brightness(60%);
}

O poder do filtro é significativo, mas você precisará testá-lo em diferentes navegadores, então fique atento.

● Inclusividade: Compatibilidade entre Navegadores

Mantenha em mente o suporte aos navegadores para várias propriedades e use polyfills ou soluções mais simples quando necessário.

Visualização

Exemplo do CSS em ação:

.imagem {
  background-image: url('praia.jpg');
  position: relative;
}

.imagem::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.5); /* Escurecendo a imagem */
  mix-blend-mode: multiply; /* Adicionando a mágica da combinação ✨ */
}

A imagem de fundo é preenchida com luz, enquanto a sobreposição transparente oferece proteção, criando uma imagem escurecida acolhedora.

Aprimore suas Habilidades

Experimente com transparência e modos de mistura para alcançar o tom perfeito para sua imagem.

Toque Final: Variáveis CSS

Para um controle mais flexível sobre o nível de escurecimento, considere usar variáveis CSS juntamente com JavaScript.

Recursos Úteis

1. Tingindo Imagens com Múltiplos Fundos | CSS-Tricks — Aprenda mais sobre técnicas para escurecer imagens em CSS.
2. CSS: mix-blend-mode - MDN — Um guia abrangente sobre como usar a propriedade mix-blend-mode.
3. Propriedade de Filtro CSS - W3Schools — Aplicando filtros para adicionar efeitos de estilo a elementos HTML.
4. Filtros CSS: Desfoque, Escala de Cinza, Brilho e Mais — SitePoint — Como mudar a aparência das suas imagens usando várias técnicas de filtragem.
5. CSS - Pseudo-elementos — Usando pseudo-elementos CSS para criar efeitos visuais impressionantes.
6. Gradiente CSS — Gerador, Criação e Fundo — Um gerador de gradientes para criar efeitos de escurecimento.
7. Modos de Mistura em CSS – A List Apart — Uma descrição detalhada dos modos de mistura em CSS e suas aplicações práticas.

Video

Navigation