css图像蒙版覆盖

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下填料画面不同的z-index

<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

由于原始问题在我的博客上引用了一篇文章，因此我决定使用Neil标记作为示例，将我的Cookie Cutter方法编写为update。