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，如果您有父级图片，请在使用CSS位置播放的父级和子级div之间使用额外的RGBA层。

如何取消子元素的不透明度？

2 个答案: