使用 css 属性更改不透明度级别答案

【问题标题】：Changing opacity level using css property使用 css 属性更改不透明度级别
【发布时间】：2013-09-26 16:01:30
【问题描述】：

<html>
  <head>
    <style>
      #main{
        opacity:1 !important;
        position:absolute;
        width:500px;
        height:500px;
        top:150px;
        left:300px;
      }
      body{
        opacity:0.3;
      }
    </style>
  </head>
  <body>
    <div id="main"></div >
  </html>

这是代码。我想对 body 应用低不透明度，对 id Main 应用最大不透明度，我已经尝试过这样但我没有达到所需的输出。有没有其他方法可以实现这一点。提前致谢。

【问题讨论】：

标签： css

【解决方案1】：

这里的问题是不透明度是由div从body继承的。此外，不透明度似乎根本不适用于身体本身（这让我感到惊讶）。

如果您只想在主体上使用半透明背景颜色，则应使用background-color: rgba(x,x,x,x)。如果你想在正文中显示透明图像，请看这个问题：

CSS Opacity inheritance issue

【讨论】：

我有同样的问题..我同意这个答案..检查这个jsfiddle.net/girishgowdayt/XskGX
@BoltClock 我将他的 html/css 放在一个 jsfiddle 中，出于某种原因，它一直给我一个完全不透明的背景。不确定我是否也做错了什么（因此我很惊讶）。无论哪种方式，由于继承，他的设置都无法正常工作。
@Stephan Muller：哦，我明白你的意思了。好的，这会让很多人措手不及 - body 的不透明度仍然会影响它的孩子，但 body 的背景颜色正在转移到 html，这是不透明的，导致 body 的背景颜色也显得不透明。这是预期的行为。您可以通过为 html 提供自己的背景颜色来阻止这种情况发生。

【解决方案2】：

你到底想要什么？我已经测试了你的代码，对我来说这很好，我有一个不透明的主体和一个不透明的主体。

【讨论】：

他想要反过来。我几乎给出了相同的答案，但后来我又读了一遍这个问题。（'最大不透明度' = 完全不透明，但事实并非如此）
那他为什么不切换属性呢？
再读一遍，他使用正确的属性来实现他想要实现的效果。它只是不那样工作。他说：“我想对主体应用低不透明度，对 id Main 应用最大不透明度”，并在主体上使用 0.3（低不透明度），在#Main 上使用 1（最大不透明度）。他的逻辑是对的。

【解决方案3】：

css 中的不透明度应用于您应用不透明度的元素的所有子元素，您可以将 div 作为覆盖或底层放置，您想要的不透明度是fiddle

<body>
<div class="overlay"></div>
<div class="main"></div>
</body>

.overlay {
    position:fixed;
    width:100%;
    height:100%;
    opacity:0.3;
}

【讨论】：