Con CSS oscurecer imagen de fondo

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

This work is under a Attribution-NonCommercial-NoDerivatives 4.0 International license.