Con CSS oscurecer imagen de fondo

1 minuto

Oscurecer

En algunos diseños necesitamos colocar una imagen de fondo que posee un mal contraste con los textos provocando que sean apenas legibles, como el siguiente caso.

Fondo claro

Fuera del portátil es realmente difícil ver que hay, y empeora según disminuye la anchura hasta llegar a una resolución como un smartphone.

El error más común es la de pensar que con un filtro podremos arreglarlo. Si usamos filter: brightness(0.5); se oscurecerá todo, tanto la imagen como el texto.

Fondo con filtro

¡Mala idea! La mejor solución es usar Photoshop o similares (¡Viva Gimp!), sinceramente, pero si por razones que están por encima de nosotros debemos usar CSS sin otra escapatoria… la solución es usar un degradado con opacidad como primer fondo.

.section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/fondo.jpg");
}

Un degradado que parte de un negro transparente a otro negro transparente exactamente igual, y como segundo fondo la imagen que queremos oscurecer. Quedará de la siguiente forma.

Fondo oscuro

Si quieres personalizar la intensidad del negro, puedes usar una elegante variable.

.section {
    --opacidad-negro: 0.5;
    background-image: linear-gradient(rgba(0, 0, 0, var(--opacidad-negro)), rgba(0, 0, 0, var(--opacidad-negro))), url("../img/fondo.jpg");
}

Donación con recompensa

  • 1 café: Respondo a tu duda en los comentarios.
  • 2 cafés: Respondo en menos de 24h a tu comentario.
  • 3 cafés: Todo lo anterior y además te doy las gracias en mis redes.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario

Tal vez también te interese...