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，因此不透明度属性效果很好。

实现此效果的另一种方法是使用alpha而不是opacity设置outerDiv的背景; 例如：变化

.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的内容。

如何从父css属性中排除子项？

3 个答案: