Как сделать затемнение фона через CSS

Все чаще стоит задача сделать затемнение картинок на сайте. Я собрал три способа, чтобы сделать это.

1 Способ. Используя свойство background-image

   background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('https://siteholo.ru/wp-content/uploads/2019/11/elephant.png');

Приведенный html:

<div class="image"></div>
<hr>
<div class="image-no"></div>

Также css:

.image-no {
   background:url('https://siteholo.ru/wp-content/uploads/2019/11/elephant.png');
   -webkit-background-size: cover;
  -moz-background-size:  cover;
  -o-background-size: cover;
  background-size: cover;
  width:100%;
  max-width: 500px;
  height: 500px;
}

.image {
   background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('https://siteholo.ru/wp-content/uploads/2019/11/elephant.png');
  -webkit-background-size: cover;
  -moz-background-size:  cover;
  -o-background-size: cover;
  background-size: cover;
  width:100%;
  max-width: 500px;
  height: 500px;
}

Результат:

See the Pen
dark-image
by vladislav (@vladislavvv)
on CodePen.

2 Способ. Используя свойство filter

filter: brightness(50%);
Стоит обратить внимание, что для прозрачных изображений не накладывается на фон, а только на видимую часть картинки. Если хотите использовать это свойство, переконвертируйте картинки в другой формат.

Результат:

See the Pen
dark-image
by vladislav (@vladislavvv)
on CodePen.

3 Способ. С помощью opacity

Данный способ является наиболее объемным, но он также заслуживает внимания.

See the Pen
dark vs. light overlays
by Craig Curtis (@craigocurtis)
on CodePen.

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии