我有一张不透明度降低的图像和一些文本，它们在一个单独的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/
如何始终以黑色显示文本？
添加
position: relative;
将文本放在顶部。
演示
问题是将opacity设置为不同于1会创建堆叠上下文。
然后，根据规范中定义的顺序，图像与文本重叠，因为：
- （4）
.text是流动的、未定位的、块级元素 - （6） 图像是生成堆叠上下文的内联元素
由于4<6、图像与文本重叠。
为了避免这种情况，您可以将.text定位为添加position: relative的元素。现在他们将属于这一类：
- （8） 使用"z-index:auto"或"z-index:0"定位子体
现在，由于6<8、文本与图像重叠。
或者，您也可以添加一个正z-index（例如z-index:1），以使.text属于下一类：
- （9） 堆叠由z索引大于或等于1的定位子体形成的上下文
您可以在What No One Told You about z-Index中阅读更多关于堆叠上下文和z轴定位的内容，这是一篇比原始规范更有吸引力的好文章。