Question

我试图将opacity设置为我的背景div，但其中的所有内容也会获得不透明度。我不想要这个。我尝试使用伪元素修复它，但它没有成功，我可以通过添加第二个背景div并将height和position设置为该div来解决此问题，但我不知道＃39; t想要设置div的高度。

如何在不添加第二个div和高度的情况下解决此问题？

您可以看到我的演示here

Answer 1

您始终可以使用RGBA值：

html {
  background-color: red;
}
#login {
  width: 365px;
  background-color: rgba(255, 255, 255, 0.3);
  padding: 37px;
}

https://jsfiddle.net/d2shse4c/2/

Answer 2

我通常做的是兄弟与绝对位置的div：

<div id="page">
   <div id="content">
      TEXT here
   </div>
   <div id="back" style="position:absolute; opacity:0.5; left:0; top:0; width:100%; height: 100%; background-color:#000000;">
   </div>
   <div id="anotherText" style="position:absolute; width:100px; height: 100px">
   TEXT
   </div>
</div>

依旧......

OR：在父div上设置png背景图像！

在div上设置不透明度，而不影响其他div

2 个答案: