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

Question

我的问题

我希望能够以这种方式处理我的CSS，当我添加一个名为＆＃34的类时;售罄的＆＃34;对于我的div，它应该添加一个售罄的重叠图章。目前我遇到了问题，似乎我正在摧毁其他类的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内的图像完全消失了。我只看到带有白色背景的售完邮票。

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;
}

*没有测试，但理论上应该工作......如果你把正确的图像联系起来，我很乐意改进，但这应该至少接近。

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