代码之家  ›  专栏  ›  技术社区  ›  user5508297

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

  •  0
  • user5508297  · 技术社区  · 8 年前

    我想让我的网站的主体有一个低透明度,但保持弹出窗口在默认的透明度为1,以便它脱颖而出。

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

    以下是我的尝试: https://jsfiddle.net/80351/0xo10tjc/

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

    1 回复  |  直到 8 年前
        1
  •  2
  •   marcelo2605    8 年前

    您可以将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/