在 div 上设置不透明度，而不影响其他 div [重复]

Posted 2023-03-06

【中文标题】在 div 上设置不透明度，而不影响其他 div [重复]

【英文标题】：setting opacity on a div, without effecting other divs [duplicate]

【发布时间】：2016-03-28 19:30:03

【问题描述】：

我正在尝试将opacity 设置为我的背景 div，但里面的所有内容也都变得不透明。我不想要这个。 我尝试使用伪元素修复它，但没有成功，我可以通过添加第二个背景 div 并将 height 和 position 设置为该 div 来解决此问题，但我不想设置div 的高度。

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

你可以看我的演示here

【问题讨论】：

如果它是不透明 div 的孩子，你就没有机会这样做（编辑了我的答案）

【参考方案1】：

您始终可以使用 RGBA 值：

html 
  background-color: red;

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

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

【讨论】：

就这么简单！谢谢。

【参考方案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>

等等……

或者： 在父 div 上设置 png 背景图片！

【讨论】：

正如我在问题中所说的那样。我不想要这个。