как сделать background затемненный

Question

Две картинки, один затемненный, как сделать так с помощю css? знаю что есть блур эффекты но это не то

Answer 1

Вариант number one:

div {float: left; display: inline-block; position: relative; width: calc(50% - 2px); height: 100vh; background: url(https://img3.goodfon.ru/wallpaper/nbig/1/5d/gorizont-oblaka-nebo-3342.jpg);}
div:nth-child(2) {border-left: 4px solid black;}

div:nth-child(2):after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
}

<div></div>
<div></div>

Вариант number two:

div {float: left; display: inline-block; position: relative; width: calc(50% - 2px); height: 100vh; background: url(https://img3.goodfon.ru/wallpaper/nbig/1/5d/gorizont-oblaka-nebo-3342.jpg);}

div:nth-child(2) {
  border-left: 4px solid black;
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://img3.goodfon.ru/wallpaper/nbig/1/5d/gorizont-oblaka-nebo-3342.jpg);
}

<div></div>
<div></div>

Вариант number three (это не затемнение конечно, но подобие чего-то):

div {float: left; display: inline-block; position: relative; width: calc(50% - 2px); height: 100vh; background: url(https://img3.goodfon.ru/wallpaper/nbig/1/5d/gorizont-oblaka-nebo-3342.jpg);}

div:nth-child(2) {
  border-left: 4px solid black;
  filter: contrast(3);
}

<div></div>
<div></div>

БЛОГ НА HUSL

как сделать background затемненный

Ответы (1 шт):