如何覆盖 document.body 的不透明度？

Question

我想让我的网站正文具有较低的不透明度，但将弹出窗口保持在默认的不透明度 1 以使其脱颖而出。

我该怎么做？我已经尝试指定弹出窗口有 opacity: 1 !important; 但它没有生效。

这是我尝试的 jsfiddle：https://jsfiddle.net/80351/0xo10tjc/

请注意，我知道如何通过将外部 div 而不是主体的不透明度设置为 0.2 来实现此目的，但我真的想知道在更改主体时是否可以这样做。

Answer 1

您可以将 html 和 body 设置为 100% 高度并将 background-color 应用于 div

html, 
body {
   height: 100%;
}

body{
  margin: 0;
  padding: 0;
}

.overlay {
  background-color: yellow;
  opacity: 0.2;
  width: 100%;
  height: 100%;
}

https://jsfiddle.net/0xo10tjc/4/

如何覆盖 document.body 的不透明度？

How to override the opacity of document.body?

javascript

html

css

document-body