html - 覆盖 div 的不透明度

Question

我目前正在开发一个“叠加弹出窗口”，当我单击某个按钮时它就会出现。

它工作得很好，但是我在 opacity

上挣扎

我的主覆盖层 div 出现在整个网站上，我给它一个 opacity，这样你就可以在 background 中略微看到页面>。

在叠加层上，我放置了一个内容 div，它显示了实际内容(在这种情况下是密码更改请求)。

无论如何，我不希望内容框是透明的，但无论我尝试什么 (z-index:10, opacity:1, position:relative 等)它不起作用。

还是透明的，因为我在overlay div里设置了opacity

代码如下:

CSS:

.changePasswordOverlay
{
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color:#fafafa;
    opacity: 0.9;
    overflow-y: hidden;
    transition: 1s;
}

.passwordOverlayContent {
    margin-left:40%;
    margin-top:15%;
    font-family:'source_sans_proregular';
    font-size:15px;  
    position:relative;
}

HTML:

   <div class="changePasswordOverlay">
        <div class='passwordOverlayContent'>
        .
        .
        .
        </div>
    </div>

Answer 1

您需要在background 中使用rgba 而不是opacity，因为opacity 具有继承属性，因此子级将也得到不透明度

请注意，rgba 代表红/绿/蓝/Alpha。这就是将用作“不透明度”值的 alpha 值。 alpha 值越大，越不透明。

.changePasswordOverlay {
  height: 100%; /* changed for demo */
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .5);
  overflow-y: hidden;
  transition: 1s;
}
.passwordOverlayContent {
  margin-left: 40%;
  margin-top: 15%;
  font-family: 'source_sans_proregular';
  font-size: 15px;
  position: relative;
  color:white /* demo */
}

<div class="changePasswordOverlay">
  <div class='passwordOverlayContent'>
     text
  </div>
</div>