г-индекс проблемы с фоновым изображением и родительским тегом изображений

Question

я имею некоторые проблемы со свойством г-индекс: Это код:

<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

У вас должна быть маска сверху изображения. Сделайте изображение фоном внешнего контейнера, а маска - фоном на внутреннем контейнере. Сначала браузер отобразит внешний контейнер (изображение), а затем отобразит внутренний контейнер (маску) сверху. Если вы пытаетесь сделать альфа-прозрачность, веб-сайт не может этого сделать для вас.

Состав:

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