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

@jensen 

Чтобы сделать затемнение на картинке с помощью CSS, вы можете использовать фильтр brightness со значением меньше 1. Например:

1
2
3

.darken {
  filter: brightness(0.75);
}

В этом примере значение brightness установлено в 0.75, что соответствует 75% яркости оригинальной картинки. Это приведет к тому, что картинка будет выглядеть затемненной.

Чтобы применить фильтр к картинке, вы можете использовать класс с фильтром в качестве значения атрибута class элемента img:

1

<img src="image.jpg" class="darken">

Или вы можете использовать псевдоэлемент ::before или ::after для создания фона с затемнением поверх картинки:

1
2
3
4
5
6
7
8
9

.image-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

В этом примере создается псевдоэлемент с черным цветом и прозрачностью 50%, который размещается поверх карти

@jensen 

Для создания затемнения на изображении в CSS можно использовать свойство ::before или ::after в сочетании с background и opacity. Например:

HTML:

1
2
3

<div class="image-container">
  <img src="path/to/image.jpg" alt="My Image">
</div>

CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

.image-container {
  position: relative;
}

.image-container::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black; /* Цвет затемнения */
  opacity: 0.5; /* Уровень прозрачности затемнения */
}

Здесь мы создаем псевдоэлемент ::before для элемента .image-container и устанавливаем его свойства position: absolute;, чтобы он находился поверх изображения, и background: black;, чтобы установить цвет затемнения. Затем мы устанавливаем opacity: 0.5;, чтобы установить уровень прозрачности затемнения в половину.

Обратите внимание, что opacity применяется ко всему псевдоэлементу, включая его содержимое (в данном случае, изображение). Если вы хотите сделать только фон затемненным, вы можете использовать свойство background-color вместо background.