Question

<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>

这是代码。我想对主体应用低不透明度，对主体ID应用最大不透明度，我试过这样但我没有达到所需的输出。是否有其他方法来实现这一点。在此先感谢。

Answer 1

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

如果您只想在身体上使用半透明背景颜色，则应使用background-color: rgba(x,x,x,x)。如果您想在身体中使用透明图像，请查看以下问题：

CSS Opacity inheritance issue

Answer 2

你到底想要什么？我测试了你的代码，对我来说这很好，我的身体没有不透明度，主体有不透明度。

Answer 3

css中的不透明度应用于您应用不透明度的元素的所有子元素，您可以将div作为叠加层或底层放置，此处所需的不透明度为fiddle

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

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

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

3 个答案: