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;

}

有人知道为什么这不起作用吗？

- Llanilek

Answer 1

您可以在填充图片下方放置两个z-index不同的绝对定位的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中。

- rob waminal

Answer 2

因为原问题提到了我博客上的一篇文章，所以我决定写一篇关于我的 Cookie Cutter 方法的 更新，并以 Neil 的标记作为例子。

- CSSBakery