CSS：不透明度降低的图像上的文字不应该降低不透明度

Question

我有一个图像，它具有降低的不透明度和一些文本，它位于一个单独的div中，它位于图像上方（负边缘 - 顶部）。虽然图像应该是透明的，但文本不应该是透明的。我现在发现，根据不透明度的值，文本以黑色或透明显示。

图像有

时

  

不透明度：1

文本为黑色，当值较低时 - 文本的不透明度也会降低。 我的标记看起来像这样：

<li>
    <img src="image.jpg">
    <div class="text">Description</div>
</li>

.text{ margin-top: -3em; }
img{ opacity: 0.5; }

http://jsfiddle.net/BFhau/1/

如何以黑色显示文字？

Answer 1

添加

position: relative;

将文字放在顶部。

Demo

---

问题是设置opacity不同于1创建堆叠上下文。

然后，根据the order defined in the spec，图像重叠文本，因为：

• （4）.text是流入的，非定位的块级元素
• （6）图像是生成堆叠上下文的内联元素

从4＆lt; 6，图像重叠文本。

为避免这种情况，您可以将.text个定位元素添加为position: relative。现在他们将属于这一类：

• （8）带有＆z; z-index的定位后代：auto＆＃39;或＆＃39; z-index：0＆＃39;

现在，因为6＆lt; 8，文本重叠图像。

或者，您也可以添加一个肯定的z-index（例如z-index:1），以使.text属于下一个类别：

• （9）堆叠由z-indices大于或等于1的定位后代形成的上下文

您可以在What No One Told You About Z-Index中阅读有关堆叠上下文和z轴定位的更多信息，这篇文章比原始规范更具吸引力。