Расчет непрозрачности ребенка, когда родитель имеет определенную непрозрачность

Question

У меня есть родительский элемент с непрозрачностью 0,5.Я хочу, чтобы непрозрачность дочернего элемента равнялась 0,3.

, каким должно быть значение непрозрачности для дочернего элемента

Answer 1

В дополнение к ответу @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, которая недопустима).

Answer 2

Вам нужно иметь 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>