html - 图片被 css 隐藏 :before pseudo-element unless opacity is different than 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 或保留默认值会导致伪元素隐藏图像。 这是 fiddle :http://jsfiddle.net/zfYnu/

Answer 1

您还需要定位图像:

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

Updated fiddle

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

请参阅CSS Color level 3 module有关不透明度和section 9.9 of CSS2.1的信息有关堆叠上下文的详细信息。