css - 如何避免在 CSS 中继承 opacity 属性？

Question

我在 CSS 文件中设置了一个div元素，opacity: 0.7;因为我希望其中的文本不透明。我在 this 中显示了一些图像div，但是这些图像带有继承的 opacity 属性。结果是不透明的图像。

是否可以为图像赋予 CSS 属性以不继承div包含它们的不透明度？如果没有，我怎样才能避免图像不透明？

谢谢。

Answer 1

如果您使用opacity允许文本具有部分透明度，则只需设置color元素的 ：

#elemId {
    color: rgba(0,0,0,0.7);
}

这可以让您避免调整opacity属性，并且应该在所有支持该opacity属性的浏览器中工作。

Answer 2

唯一的办法就是定位。这是一篇来自 CSS Tricks 的精彩文章：http: //css-tricks.com/non-transparent-elements-inside-transparent-elements/

使用position: relative;和一个最高值使元素相互叠加。

如果您只是想让背景透明，那么您可以rgba()在背景中使用该值。

编辑：

这是一个疯狂的想法。您可以使用 PHP GD 来呈现带有灰色背景（透明）的图像，并带有您希望在正确位置显示的白色文本。然后使用mask-box-image或mask-imageCSS 属性并将其设置为渲染图像。

当然，如果您的内容不是动态的，那么您可以在 Photoshop/任何程序中制作图像。

从浏览器到 GD 渲染，抗锯齿不会相同，但如果您不想使用定位，这是最好的 hack。

Answer 3

在您的 css 中添加以下代码

z-索引：111

有用。