我有一个 div 元素，我在 CSS 文件中设置了 opacity: 0.7;，因为我希望它里面的文本是不透明的。我在这个div 中显示了一些图像，但这些图像出现时带有继承的 opacity 属性。结果是不透明的图像。
是否可以为图像赋予 CSS 属性以不继承包含它们的 div 的不透明度？如果不是，我怎样才能避免图像不透明？
谢谢。
【问题讨论】：
opacity来达到什么目的？可以用background-color和rgba完成吗？
color: rgba(0,0,0,0.7);。
如果您使用opacity 来允许文本 具有部分透明度，那么只需设置元素的color：
#elemId {
color: rgba(0,0,0,0.7);
}
这可以让您避免调整opacity 属性，并且应该在所有支持opacity 属性的浏览器中也可以工作。
【讨论】：
opacity: 0.7; 行并将 color: rgba(0, 0, 0, 0.7); 文本变为黑色，并且它不是半透明/不透明的，因为我想要它。我正在运行最新版本的 Chrome，所以我认为这不是浏览器问题...
color: rgba(0,0,0,0.55);，它似乎有效。我不知道为什么，但通过这种方式，我可以实现与opacity: 0.7 类似的东西。非常感谢！
唯一的方法是定位。这是一篇来自 CSS Tricks 的精彩文章：http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
使用position: relative; 和一个最高值使元素相互叠加。
如果您只是想让背景透明，那么您可以在背景中使用 rgba() 值。
编辑：
这是一个疯狂的想法。您可以使用 PHP GD 来呈现带有灰色背景（透明）的图像，并带有您希望在正确位置显示的白色文本。然后使用mask-box-image 或mask-image CSS 属性并将其设置为渲染图像。
如果您的内容当然不是动态的，那么您可以在 Photoshop/任何程序中制作图像。
从浏览器到 GD 渲染的抗锯齿不会相同，但如果您不想使用定位，则这是最好的 hack。
【讨论】：
color: 解决方案！无论如何 +1 =)
在你的 css 中添加以下代码
z-index:111
它有效。
【讨论】：