css - body 上的不透明度不影响 body 上的背景颜色

Question

我正在尝试为 body 设置不透明度。但是，我遇到了一个问题。

在body 上设置不透明度时，只有它的内容会受到影响。 背景不受不透明度的影响。

$("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 上设置它。我怎样才能使不透明度影响 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?