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");
}

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se paga 1 mes de servidor.
  • 3 cafés: Se cubre 1 mes de Black box.

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...