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

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上设置它。那么我该如何让不透明度影响到背景呢？

P.S. 新年快乐！

- Red

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://dev59.com/s1YN5IYBdhLWcg3wFkoL#47998865

CSS规范中“传播到视口”的含义是什么？

- Temani Afif

---

啊，确实。我需要在html元素上设置一个背景。当设置html {background: #fff;}时，它可以正常工作。感谢您的见解！ - Red

这不是继承。父级不会继承其子级属性。这是传播。请参见https://dev59.com/DJ7ha4cB1Zd3GeqPlpcx#41886687。 - BoltClock

@BoltClock 嗯，我并不是真的指CSS的继承 :) 我用它来泛指HTML获取相同的背景，但我已经更新了正确的词，并添加了你的链接。 - Temani Afif

Answer 2

使用rgba()来设置线性渐变颜色。这样你就可以设置颜色的透明度。默认情况下，将alpha透明度值设置为1（即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>

- hungerstar

Answer 3

据我所知，body元素并不存在opacity属性。因此，您可以通过以下方式实现所需效果：

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>

- Alexandru Corlan

---

你的说法是错误的。不透明度可以设置在任何元素上。 - Red

据我所知，body的不透明度属性并不存在。你是从哪里得到这个信息的？ - Temani Afif