Как сделать затемнение картинки в css

Узнайте, как легко и быстро добавить затемнение картинки на своем сайте с помощью CSS. Узнайте, как использовать фильтры и свойство opacity для создания различных эффектов затемнения и примените их для решения практических задач.

Чтобы сделать затемнение картинки в CSS, нам понадобится наложить эффект фильтра на картинку. Для этого используется свойство filter, которое принимает значения различных фильтров. Одним из них является фильтр hue-rotate, который позволяет изменять оттенок изображения и использовать его для затемнения изображения. Фильтр этот имеет следующий синтаксис:

filter: hue-rotate(<angle>deg);

Где <angle> представляет угол в градусах. Чтобы применить этот фильтр к картинке, нужно добавить следующий код к ее CSS-стилям:

img {
  filter: hue-rotate(180deg);
}

В результате применения этого фильтра изображение будет затемнено на 180 градусов, что приведет к следующему результату: