Html css 图像遮罩覆盖
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3182683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css image mask overlay
提问by Neil Hickman
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.
我正在尝试将透明的 png 框架图像悬停在 img 标签上以在其上创建框架的外观。我尝试了多种不同的方法，但似乎都不起作用。
The latest method I used was http://www.cssbakery.com/2009/06/background-image.htmlthis doesn't seem to work either.
我使用的最新方法是http://www.cssbakery.com/2009/06/background-image.html这似乎也不起作用。
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
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.
有谁知道为什么这不起作用。
回答by rob waminal
you could put 2 absolute divs under filler-picture with different z-index
您可以将 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
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;
}
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.
您可以直接放置图像而不是使用图像作为背景，但图像不遵循 z-index，因此您必须将图像包装在 div 中。
