指定父div不透明度但使其不影响子HTML元素

Question

我在div中有一个段落元素.div的不透明度为0.3,段落的不透明度为1.

当我显示元素时,看起来段落是透明的,就像它的不透明度为0.3.

有没有办法让div中的段落具有完全不透明度？也许我可以为此设置CSS值？

<div style="opacity: 0.3; background-color: red;">
   <p style="opacity: 1;">abcde</p>
</div>

Answer 1

您不能,不透明度级别始终相对于父级的不透明度.因此,0.3内的1.0将是0.3的100%,即0.3,而0.3内的0.5将是0.3的50%,即0.15.如果您仅使用不透明度作为背景颜色,则可以使用RGBA方法指定颜色,以便红色不透明而不是内容(因此内部的段落).

<div style="background-color: rgba(255, 0, 0, 0.3);">
   <p>abcde</p>
</div>

看这里.