Несколько методов затемнения фонового изображения в CSS:

1. Использование полупрозрачного чёрного псевдоэлемента ::after. 1 Для контроля над степенью затемнения нужно использовать альфа-канал в rgba. 1 Пример кода: .your-element::after { content: ''; position: absolute; top: 0; background: rgba(0, 0, 0, 0.6); /* Это затемнение. Его степень можно отрегулировать... */ width: 100%; height: 100%; }. 1
2. Применение линейных градиентов CSS3. 1 Градиент с одинаковыми начальным и конечным цветами накладывают на изображение. 1 Пример кода: .your-element { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('your-image.png'); }. 1 В этом случае прозрачность также регулируется через rgba для получения необходимой степени затемнения. 1
3. Использование CSS-фильтров. 1 Фильтр brightness() позволяет регулировать степень затемнения изображения. 1 Пример кода: .your-element { filter: brightness(60%); }. 1
4. Применение свойства background-blend-mode. 4 Оно устанавливает режим смешивания фона. 4 Для затемнения фонового изображения можно использовать опцию darken. 4