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

@aaron_armstrong 

Чтобы сделать затемнение элемента в CSS, вы можете использовать свойство filter со значением brightness. Это свойство позволяет увеличить или уменьшить яркость элемента. Чтобы уменьшить яркость элемента, вы можете указать значение меньше 100%. Например, чтобы сделать затемнение элемента на 50%, вы можете использовать следующий код:

1
2
3

.darken {
  filter: brightness(50%);
}

Чтобы сделать затемнение элемента на другой процент, просто замените значение 50 на нужное вам значение. Например, чтобы сделать затемнение элемента на 75%, вы можете использовать следующий код:

1
2
3

.darken {
  filter: brightness(75%);
}

Обратите внимание, что свойство filter не поддерживается во всех браузерах. Если вы хотите обеспечить поддержку во всех браузерах, вы можете использовать другой спос

@aaron_armstrong 

Существует несколько способов создания затемнения в CSS, вот некоторые из них:

1. Используя свойство opacity:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.5; /* прозрачность */
  z-index: 9999; /* чтобы элемент был поверх всего */
}

1. Используя псевдоэлемент ::before или ::after:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.overlay::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.5; /* прозрачность */
  z-index: 9999; /* чтобы элемент был поверх всего */
}

1. Используя линейный градиент:

1
2
3
4
5
6
7
8
9

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); /* градиент с прозрачностью */
  z-index: 9999; /* чтобы элемент был поверх всего */
}

Обратите внимание, что в примерах выше используется position: fixed, чтобы затемнение занимало всю видимую область, но в зависимости от вашей конкретной ситуации вам может потребоваться использовать другой тип позиционирования.