css图像蒙板叠加 [英] css image mask overlay
问题描述
我想要一个透明的png框架图像悬停在一个img标签上,以创建一个框架的外观。我尝试了多种不同的方法,没有任何方法可以工作。
I'm trying to get a transparent png frame image to hover over an img tag to create the look of a frame over it. I've tried multiple different approaches and none seem to work.
我使用的最新方法是 http://www.cssbakery.com/2009/06/background-image.html 这似乎无效。
The latest method I used was http://www.cssbakery.com/2009/06/background-image.html this doesn't seem to work either.
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;
}
有没有人知道为什么这不工作。
Does anyone have any idea why this isn't working.
推荐答案
您可以将两个绝对div放在填充图片下,使用不同的z-index
you could put 2 absolute divs under filler-picture with different 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,所以你必须将图像包装在divs。
instead of using the image as a background you could put the image directly but images don't follow z-index so you have to wrap the images in divs.
这篇关于css图像蒙板叠加的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!