Какие методы затемнения фонового изображения существуют в CSS?

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

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

Пользователь

Время добавления