CSS - 在 DIV 中使用 DIV 继承不透明度值

Question

如何防止父 DIV 的不透明度级别成为子 DIV 的限制？

 <div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: .50; z-index: 1000; background-color:red;">
                            <div style="opacity:1; margin-top:25%; color:white;">
                                <apex:pageMessages />    
                            </div>
                        </div>

现在子 DIV 最多只能达到 50%。

Answer 1

使用 rgba 作为父级的背景色(并完全移除不透明度属性)。这允许仅将透明度设置为背景颜色，而不是实际元素。

所以代替

background-color:red;

使用

background-color:rgba(255,0,0,0.5);