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。