透明度与覆盖DIV

Question

我目前工作的一个“叠加弹出”，当我点击某个按钮出现。

它工作的很好，但是我与opacity

我主要覆盖div出现在整个网站的斗争，我给它一个opacity，这样就可以在background稍微看到页面。

在overlay上我放了一个内容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

你需要background而不是opacity使用rgba，因为opacity也因此继承属性的孩子会获得opacity以及

请注意，rgba代表红/绿/蓝/阿尔法。这就是可以作为你的“不透明”价值的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

移动changePasswordOverlay（而不是内部），并改变你的CSS来position:fixed后passwordOverlayContent中，制成 “不透明独立的”

Answer 3

透明度应用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; 
}