不透明度与叠加div

Question

我目前正在处理“叠加弹出”，当我点击某个按钮时会出现。

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

很困难

我的主要重叠div出现在整个网站上，我给它opacity，以便您可以在background中略微看到该页面。

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

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

它仍然是透明的，因为我在叠加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

您需要在rgba而不是background中使用opacity，因为opacity具有继承属性，因此儿童也会获得opacity

请注意rgba代表红色/绿色/蓝色/ Alpha。并且那个将作为你的＆＃34;不透明度＆＃34;值。 alpha值越大，不透明度越高。

＆＃13;

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

不透明度应用了div及其children，因此.passwordOverlayContent也将使用相同的opacity，使用background rgba代替opacity

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

更改了课程：

.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;
}

Answer 3

在passwordOverlayContent之后移动changePasswordOverlay容器（而非内部），并将您的css更改为position:fixed以使其变为＆＃34;不透明度＆＃34;