Как подкрутить прозрачности для фонового изображения на сайте?

Question

Нужно сделать фоновое изображение на сайте полупрозрачным. Я попробовал использовать:

* {
     background-color: rgba(255, 255, 255, 0.5);
}
body {
     background-image: url(...);
}

Но такое решение делает прозрачными и некоторые другие блоки, что мне не надо. Как можно по-другому реализовать прозрачность?

Answer 1

Создать блок с position: absolute и растянуть его на все окно, ему же и задать opacity. Картинку можно вставить как через css, так и через img.

Через CSS:

body {
  padding: 0;
  margin: 0;
}

.cssbg {
  background: center / cover url("https://picsum.photos/1024/768");
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: .5;
  z-index: -1;
}

<div class="cssbg">

</div>

<div class="someContent">content</div>

Через img:

body {
  padding: 0;
  margin: 0;
}

.bgimg {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: .5;
  z-index: -1;
  object-fit: cover;
}

<img class="bgimg" src="https://picsum.photos/1024/768">
<div class="content">content</div>

БЛОГ НА HUSL

Как подкрутить прозрачности для фонового изображения на сайте?

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