覆盖层的不透明度 div

Question

我目前正在开发 "overlay pop up"，它会在我单击某个按钮时出现。

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

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

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

无论如何，我不希望内容框是透明的，但无论我尝试什么（z-index:10、opacity:1、position:relative 等）它都不起作用.

还是透明的，因为我在overlay里设置了opacitydiv。

代码如下：

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 具有继承属性，因此子级也会获得 opacity

注意rgba，代表Red/Green/Blue/Alpha。这就是将用作 "opacity" 值的 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>

Answer 2

将 passwordOverlayContent 容器移到 changePasswordOverlay 之后（而不是在里面），并将 css 更改为 position:fixed 使其成为 "opacity independant"

Answer 3

Opacity 应用了 div 及其 children，因此 .passwordOverlayContent 也将具有相同的 opacity，使用 background rgba 而不是 opacity

background-color: rgba(0, 0, 0, .9);

已更改 class：

.changePasswordOverlay
{
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .9);
    overflow-y: hidden;
    transition: 1s;
}

覆盖层的不透明度 div

opacity with an overlay div

html

css

overlay

opacity