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; 

}

我想擁有一個圖像上的面具，有人有想法來解決這個問題？

Answer 1

您需要在圖像頂部有蒙版。將圖像作爲外部容器的背景，將蒙版設置爲內部容器的背景。瀏覽器首先渲染外部容器（圖像），然後渲染內部容器（蒙版）。如果你想要做alpha透明，那麼web不能爲你做。

結構：

<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/