Question

我对z-index属性有一些问题：这是代码：

<div id="sidebarCont">
<div id="avatarCont" class="mask">
    <img id="" class="" src="img.jpg" alt=""/>
</div>

和css：

#avatarCont{
overflow:hidden;
height:160px;
width:160px;
margin:0px auto;
background:url('../img/mask.png') no-repeat;
position:relative;
z-index:70;

}

#avatarCont img{
position:absolute;
top:0px;
left:0px;
z-index:50;

}

我想在图像上有一个面具，有人有想法解决这个问题吗？

Answer 1

您需要在图像顶部放置遮罩。使图像成为外部容器的背景，并使掩模成为内部容器的背景。浏览器将首先渲染外部容器（图像），然后将内部容器（掩码）渲染到顶部。如果您尝试进行Alpha透明度，那么网络无法为您执行此操作。

结构：

<div class="image">
    <div class="mask"/>
</div>

CSS：

.image, .mask {
    height:160px;
    width:160px;
}

.image {
    margin:0px auto;
    position:relative;
    z-index:70;
}

.mask {
    background:url('img.jpg') no-repeat;
}

Answer 2

你可以使用:after伪元素，这样你就可以在容器后面有一个掩码：http://jsfiddle.net/7Fx7W/2/

z-index问题与背景图像和图像父标记

2 个答案: