css - 背景图像和图像父标签的 z-index 问题

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;

我想在图像上加一个 mask ，有人有解决问题的想法吗？

Answer 1

您需要在图像顶部放置 mask 。将图像作为外部容器的背景，将蒙版作为内部容器的背景。浏览器将首先渲染外部容器(图像)，然后在顶部渲染内部容器( mask )。如果您尝试实现 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;
}