覆盖div的不透明度

debugcn 发表于 Dev

安德烈

我目前正在处理“叠加弹出窗口”，当我单击某个按钮时，该窗口会显示。

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

我的主要叠加层div出现在整个网站上，我给了它一个标记opacity，这样您就可以在background。

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

反正，我不希望内容框是透明的，但不管我什么（z-index:10，opacity:1，position:relative等），这是行不通的。

它仍然是透明的，因为我opacity在overlay div中设置了。

这是代码：

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>

迪帕斯

你需要使用rgba的background，而不是opacity因为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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-21

我来说两句

0条评论

登录后参与评论

来自分类Dev

如何取消子div的不透明度？

来自分类Dev

平滑滚动+ Div不透明度

来自分类Dev

按钮的不透明度/透明度

来自分类Dev

减少形式的不透明度

来自分类Dev

改变DIV中的不透明度

来自分类Dev

JavaScript div以不同的不透明度级别淡入

来自分类Dev

如何设置图像与DIV对应的不透明度

来自分类Dev

通过不透明度对div类进行排序

来自分类Dev

CSS线性不透明度

来自分类Dev

Tkinter按钮不透明度

来自分类Dev