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有关 opacity 和 section 9.9 of CSS2.1 的信息有关堆栈上下文的详细信息。