CSS:不透明度降低的图像上的文本不应该减少不透明度
提问于 2014-04-16 10:29:31
我有一个图像，减少了不透明度和一些文字，这是在一个单独的div，是躺在图像(负边缘-顶部)。虽然图像应该是透明的，但文本不应该透明。我现在发现，根据不透明度的值，文本以黑色或透明的形式显示。
当图像有
不透明度:1
文本是黑色的，当值较低时-文本也有一个减少的不透明度。我的标记看起来如下：
<li>
<img src="image.jpg">
<div class="text">Description</div>
</li>
.text{ margin-top: -3em; }
img{ opacity: 0.5; }怎样才能始终以黑色显示文本？
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-04-16 10:33:30
添加
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的定位子代形成的叠加上下文。
您可以阅读更多关于没有人告诉你Z-索引中的堆叠上下文和z轴定位的内容，这是一篇比原始规范更吸引人的文章。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23117393
复制相关文章
![css opacity属性_CSS中的opacity属性[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/6e24cdb6bb6b1003641c5fa1b7f43dfb.jpeg)
点击加载更多
腾讯云开发者
