我正在尝试将透明的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"> </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;
}
有没有人知道为什么这不起作用。
答案 0 :(得分:5)
你可以在不同的z-index
的填充图片下放置2个绝对div<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中。
答案 1 :(得分:3)
由于原始问题引用了我博客上的帖子,我决定使用Neil的标记为我的Cookie Cutter方法编写update作为示例。