Как сделать полупрозрачный фон?

Question

[Афанасий Сидоров]

Всем здравствуйте! Сделал фон при помощи

html {
background-image: url();
}

Как сделать фон полупрозрачным? Если через opacity, то как?

Comments

[Антон Литвиненко]

Не надо давать фон тегу html.
Если будет опасити оно повлияет на вложенные элементы

[Афанасий Сидоров]

Антон Литвиненко, я дал фон тегу body, но всё равно opacity даёт прозрачность всей странице

[Антон Литвиненко]

Афанасий Сидоров, а одно другому не мешает. но тегу html фон обычно не задают

[Kirill Kirik]

Афанасий Сидоров,

div {
background: url(image.jpg);
opacity: 0.5;
z-index: -1;
}

[Rustam Bainazarov]

Афанасий Сидоров, нужно сделать фон на отдельном элементе и повесить его на fixed.

Answer 1

[Otrivin]

Не задавай фон самому элементу. Ты можешь определить псевдоэлемент ::before или ::after, задать фон ему, его и сделать полупрозрачным.

body {
  position: relative;
}
body::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url() center/cover;
  opacity: 0.5;
}

Comments

[Афанасий Сидоров]

У меня на странице есть ссылки, после этого они не работают

[Otrivin]

Афанасий Сидоров, возможно псевдоэлемент перекрывает контент. Оберни его и задай относительное позиционирование + z-индекс