Question

我有一个不透明度为0.5的父元素。我希望孩子的不透明度为0.3。

子元素的不透明度应该是什么值

Answer 1

您需要在已经具有0.6不透明度的物体上具有0.5不透明度，以使最终不透明度为0.3。

简单数学：

0.5 × x = 0.3 (this is what we want)
0.5   1
--- = -
0.3   x
0.3 / 0.5 = 0.6 = x

.parent, .child {padding: 5px;}
.parent {background: #f00; opacity: 0.5;}
.child {background: #f00; opacity: 0.6;}

<div class="parent">
  <div class="child">
  </div>
</div>

Answer 2

除了@Praveen Kumar Purushothaman的答案外，我还将使用CSS变量来更好地控制它：

.parent {
  opacity: var(--op, 0.5);
}

.child {
  background: blue;
  height: 50px;
  opacity: calc(var(--oc)/var(--op, 0.5));
}

<div class="parent">
  <div class="child" style="--oc:0.3">
  </div>
</div>
<div style="height:50px;background:rgba(0,0,255,0.3)"></div>
<div class="parent">
  <div class="child" style="--oc:0.4">
  </div>
</div>
<div style="height:50px;background:rgba(0,0,255,0.4)"></div>

您可能会注意到，您只能在0和op之间设置不透明度值，这是合乎逻辑的，因为子级不能比其父级更不透明，并且该公式不允许更大的值（您将有一个不透明的> 1，它是无效的）。

当父母有特定的不透明度时计算孩子的不透明度

2 个答案: