css image mask overlay

Question

Я пытаюсь получить прозрачное изображение рамки png, чтобы навести курсор на тег img, чтобы создать внешний вид фрейма над ним. Я пробовал несколько разных подходов, и никто не работает.

Последний метод, который я использовал, был http://www.cssbakery.com/2009/06/background-image.html, это тоже не работает.

HTML

<div class="filler"> 
    <div class="filler-picture"> 
     <img src="../../media/img/test.jpg" alt="test" /> 
     <div class="filler-mask">&nbsp;</div> 
    </div> 
</div> 

CSS

.filler { 

    padding-left:20px; 
    height:361px; 
    width:559px; 
    float:left; 

} 

.filler-mask { 

    background: url('..img/filler.png') no-repeat; 
    position: absolute; 
    left:0; top:0; 
    height:361px; 
    width:559px; 

} 

.filler-picture { 

    z-index: 0; 
    background: url('..img/test.jpg') no-repeat; 
    position: relative; 
    height: 361px; 
    width: 559px; 
    display: block; 

} 

Кто-нибудь есть какие-либо идеи, почему это не работает.

Answer 1

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

<div class="filler"> 
    <div class="filler-picture"> 
     <div class="filler-img"> 
      <img src="../../media/img/test.jpg" alt="test" /> 
     </div> 
     <div class="filler-mask"> 
      <img src="../../media/img/filler.png" alt="filler" /> 
     </div> 
    </div> 
</div> 

CSS

.filler-mask { 
    position: absolute; 
    left:0; top:0; 
    height:361px; 
    width:559px; 
    z-index: 900; 
} 

.filler-img{ 
    position: absolute; 
    left:0; top:0; 
    height:361px; 
    width:559px; 
    z-index: 50; 
} 

вместо того, чтобы использовать изображение в качестве фона можно поместить изображение непосредственно, но изображений не следует за z-index, поэтому вам нужно обернуть изображения в div.

Answer 2

Поскольку исходный вопрос упоминается в сообщении в моем блоге, я решил написать update моему методу резака для печенья, используя пример разметки Neil.