html - 如何从父 CSS 属性中排除孩子？

Question

我正在使用 css 处理元素的不透明度。一个段落放置在一个 div 中，但是当我将 div 的不透明度设置为 0.4 时，该段落也会影响。我试图通过分配不透明度 1.0 来覆盖段落中的 div，这不起作用。我该如何解决这个问题？

Answer 1

简短的回答是你不能。这就是不透明度的工作原理。

更长的答案取决于您实际尝试实现的目标（旧的 XY 问题）。

例如，如果您希望 div 的背景是半透明的，而不是段落，那么您可以通过使用半透明背景而不是使整个 div 半透明来解决这个问题。

Answer 2

我知道解决此问题的唯一方法是将背景与内容分开：

<div id="container" style="position: relative;">
    <div id="background" style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; opacity: 0.4; background: #ccc;">&nbsp;</div>
    <div id="content">Your content here</div>
</div>

Answer 3

我之前已经这样做了。如果我没记错的话，我将 设置position:absolute;为 innerDiv，因此 opacity 属性效果很好。

实现这种效果的另一种方法是将outerDiv的背景设置为alpha而不是opacity；例如：改变

.outerDiv{
  background-color: white; //or #fff or rgb(255,255,255) 
  opacity: 0.4;
}

到

.outerDiv{
  background-color: rgba(225,225,225,0.4);
}

第四个值是 alpha，其作用类似于不透明度。它不会打扰 div 的内容。