身体不透明度不影响身体背景颜色

Question

我试图在身体上设置不透明度。但是，我遇到了一个问题。

在正文上设置不透明度时，只会影响其内容。背景不受不透明度的影响。

$("button").click(function() {
  $("body").toggleClass("opacity");
});

* {
  box-sizing: border-box;
}

body {
  background: linear-gradient(to right, #1BBCB1, #37B9E9);
  font-family: 'Arial';
  margin: 0;
  text-align: center;
  opacity: 1;
}

body.opacity {
  opacity: .3;
}

button {
  background-color: transparent;
  border: 2px solid #000;
  border-radius: 3px;
  margin-top: 15px;
  padding: 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>The background gradient disapears when I set the opacity smaller then 1</p>
<button>Toggle opacity</button>

当在div上做同样的事情时它工作正常。

$("button").click(function() {
  $("div").toggleClass("opacity");
});

* {
  box-sizing: border-box;
}

body {
  font-family: 'Arial';
  margin: 0;
  text-align: center;
}

div {
  background: linear-gradient(to right, #1BBCB1, #37B9E9);
  opacity: 1;
}

div.opacity {
  opacity: .3;
}

button {
  background-color: transparent;
  border: 2px solid #000;
  border-radius: 3px;
  margin-top: 15px;
  padding: 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>The background gradient disapears when I set the opacity smaller than 1</p>
  <button>Toggle opacity</button>
</div>

但我不能用div这样做。我必须在body上设置它。如何使不透明度影响身体的背景？

附：新年快乐！

Answer 1

这是因为body的背景传播到html元素（因为这个没有背景集），因此html也具有相同的body背景。在你的情况下，不透明度也适用于背景，但你只是看到一个html元素。

在html中添加背景以查看差异：

$("button").click(function() {
  $("body").toggleClass("opacity");
});

* {
  box-sizing: border-box;
}

html {
 background:red;
}

body {
  background: linear-gradient(to right, #1BBCB1, #37B9E9);
  font-family: 'Arial';
  margin: 0;
  text-align: center;
  opacity: 1;
}

body.opacity {
  opacity: .3;
}

button {
  background-color: transparent;
  border: 2px solid #000;
  border-radius: 3px;
  margin-top: 15px;
  padding: 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>The background gradient disapears when I set the opacity smaller then 1</p>
<button>Toggle opacity</button>

---

一些有用的链接，以了解此行为：

https://www.w3.org/TR/css-backgrounds-3/#special-backgrounds

https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/

https://stackoverflow.com/a/47998865/8620333

What's the meaning of "propagated to the viewport" in the CSS spec?

Answer 2

使用rgba()作为线性渐变颜色。这样你就可以设置颜色的透明度。默认情况下，Alpha透明度值设置为1（a.k.a。100％不透明度=无透明度）。然后将值更改为小于1的值，以使背景变为半透明。

注意：此解决方案仅影响背景而不影响子元素。其中，可能是也可能不是预期的结果。

$("button").click(function() {
  $("body").toggleClass("opacity");
});

* {
  box-sizing: border-box;
}

body {
  background: linear-gradient(to right, rgba(27, 188, 177, 1), rgba(55, 185, 233, 1));
  font-family: 'Arial';
  margin: 0;
  text-align: center;
  opacity: 1;
}

body.opacity {
  background: linear-gradient(to right, rgba(27, 188, 177, 0.3), rgba(55, 185, 233, 0.3));
}

button {
  background-color: transparent;
  border: 2px solid #000;
  border-radius: 3px;
  margin-top: 15px;
  padding: 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>The background gradient disapears when I set the opacity smaller than 1</p>
<button>Toggle opacity</button>

Answer 3

据我所知，身体的不透明度属性不存在。所以你可以用这样的东西获得所需的效果：

https://codepen.io/calexandru/pen/YYQLmW

$( function () {
  $("#target").on("click", function() {
    $('body').addClass('opacity-container');
  });
} );

.opacity-container::after {
  /*CSS*/
  content: "";
  background: url(https://firebasestorage.googleapis.com/v0/b/betaproject-8a669.appspot.com/o/Quote-Generator%2F1.jpg?alt=media&token=4de18117-665f-4166-9111-4401af0cd555);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Click the button for background with opacity</p>
<button id="target">Click me</button>