Как отменить непрозрачность для дочернего элемента?

Question

Я хочу применить прозрачность для родителя, но не хочу, чтобы дочерний элемент наследовал эту прозрачность.

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

.parent {
  opacity: 0.6;
}

Есть ли способ "отменить" унаследованную непрозрачность? может быть принудительно установить opacity=1 для дочернего элемента?

Answer 1

Непрозрачность дочернего элемента всегда будет непрозрачностью родительского, если непрозрачность дочернего элемента равна 1.

Это не проблема наследования, а способ вычисления непрозрачности.

Например,

<div id="parent">
    <div></div>
</div>

<div id="original">
</div>

<div id="quarter">
</div>

#parent div, #quarter {
    width: 100px;
    height: 100px;
    background-color: orange;
}

#parent div {
    opacity: 0.5;
}

#parent {
    opacity: 0.5;
}

#quarter {
    opacity: 0.25;
}

Непрозрачность

#quarter, с вашей точки зрения, такая же, как у #parent div, но на самом деле #parent div имеет двойную непрозрачность #quarter. Смотрите этот jsfiddle для более подробной информации: http://jsfiddle.net/HUaNm/

---

Единственный способ избежать этого - это отодвинуть ребенка от родителя. В качестве альтернативы, в зависимости от того, что вы хотите здесь, вы также можете использовать rgba цвета для фона / границы / цвета шрифта родителя вместо непрозрачности, но эффект не такой, как применение прозрачности.

Answer 2

если у вас есть родительский цвет фона - используйте RGBA, если у вас есть родительское изображение - используйте дополнительный слой RGBA между родительским и дочерним divами, играющими с позицией css.