css - 如何在不影响其中的其他元素的情况下将不透明度应用于 div？

Question

当我对一个 div 应用不透明度时，该 div 中的所有其他元素都获得与父 div 相同的不透明度，我希望其子元素没有任何不透明度。我将不胜感激。

Answer 1

您只能使用 rgba() 颜色符号来控制父级 div 的某些单独组件的 alpha。即使那样，浏览器对 rgba() 的支持也比对 opacity 的支持稍差，并且您不能使用供应商扩展:

#parent {
    color: rgba(255, 255, 255, 0.5);
    background-color: rgba(153, 0, 0, 0.5);
}

如果您需要浏览器支持，请改用该颜色的透明 PNG 图像:

#parent {
    color: rgba(255, 255, 255, 0.5);
    background-image: url(bg.png);
}

不要设置opacity属性；否则，父级 div 中所有内容的 opacity 将与此 opacity 相关，并指定父级 opacity: 0.5和 child opacity: 2.0 也不会工作。