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

Question

我正在尝试将 opacity 设置为我的背景 div，但其中的所有内容也变得不透明。我不想要这个。我尝试用伪元素修复它，但没有成功，我可以通过添加第二个背景 div 并为那个 [=21] 设置 height 和 position 来解决这个问题=]，但我不想为 div.

设置高度

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

你可以看我的演示here

Answer 1

我通常做的是 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>

等等....

或：在父对象上设置 png 背景图像 div!

Answer 2

您始终可以使用 RGBA 值：

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

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

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

setting opacity on a div, without effecting other divs

css

opacity