html - 将类添加到 div 时添加叠加图像

Question

我的问题

我希望能够以这种方式处理我的 CSS，当我向我的 div 添加一个名为“sold-out”的类时，它应该添加一个 sold-out overlay stamp。目前我遇到了问题，似乎我正在破坏其他类的 CSS。不过，我希望你能帮我找到一个好的解决方案。

我的 HTML:

<div class="rotate sold-out">
    <a href="images/packages/background01.jpg" rel="imagebox" title="">
    <img src="images/packages/background01.jpg" alt=""/></a>
</div>

如您所见，我已经在此处插入了一张图片，售完的邮票(透明的 .png)应该显示在当然的最高层。

我的 CSS 尝试:

.sold-out {
    content: url(../images/sold_out_stamp.png);
}

事情是这样的:div 中的图像完全消失了。我只看到白色背景的 Sold-out-stamp。

Answer 1

您走在正确的轨道上。不要用覆盖图像替换售罄元素的内容(从而完全替换它)，您应该设置伪元素的内容并将其放置在售罄元素上。

.sold-out{ position:relative; }
.sold-out::before{
    content:url(../images/sold_out_stamp.png);
    position:absolute;
    z-index:2;
    top:0;
    left:0;
}

* 没有测试，但理论上应该可行...如果您对链接的正确图像进行了修改，我很乐意改进，但这至少应该是接近的。

如果您需要进一步指导，请告诉我。