html - 图像被 css 隐藏：在伪元素之前，除非不透明度不同于 1

Question

我尝试使用 css 伪元素为图像设置背景颜色：

<div class="my">
    <img src="http://cdn.impressivewebs.com/123rf-jan.jpg"/>
 </div>

CSS：

img {
    height: 100px;
    width: 100px;
}

.my:before {
    content: "";
    display: block;  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    background: rgb(0,255,255);  
}

div {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: red;
}

我设法使它工作的唯一方法是设置opacity:0.99;或任何其他不是 1 的值。我尝试使用 z-index 没有成功。这发生在 Chrome 和 Firefox 中。

设置opacity为 1 或将其保留为默认值会导致伪元素隐藏图像。这是小提琴：http: //jsfiddle.net/zfYnu/

Answer 1

您还需要定位图像：

img {
    position: relative;
    height: 100px;
    width: 100px;
}

更新的小提琴

设置opacity为小于 1 会导致图像创建自己的堆叠上下文。这会导致图像将自身堆叠在:before您定位的伪元素之上。如果您保留opacity默认值 1，则不会发生这种情况，这会导致:before伪元素堆叠在图像顶部。

有关堆叠上下文的详细信息，请参阅 CSS2.1 的CSS 颜色级别 3 模块opacity和CSS2.1 的第 9.9 节。