css - 如何将一张图片叠加到另一张图片上

Question

我不认为这是可以做到的，但无论哪种方式都希望得到确认。

我的商店中有一张使用这样的代码的产品图片，我无法对其进行编辑

<div class="product"><a href="productpage.php"><img id="productimage0" class="productimage" src="images/prod.jpg" style="border:0" alt=" " /></a></div>

这给了我产品图片和信息页面的链接。我想做的是在该产品图片上添加一个图形，显示它本周有 20% 的折扣。我可以只制作一张包含文字的图像，但随着折扣的变化，我希望有一种更有活力的做事方式。

我希望通过css做到这一点，但真的不知道怎么做。

我无法更改页面上的源代码，但可以编辑 css 文件。

谢谢阅读

阿尔布雷希特

Answer 1

像这样的东西怎么样：

http://jsfiddle.net/QHFWf/2/

HTML

<div class="product">
    <a href="productpage.php">
        <img id="productimage0" class="productimage" src="images/prod.jpg" style="border:0" alt=" " />
    </a>
</div>

CSS

.product {
    width:200px;
    position:relative;
    background:eee;
}
.product img {
    width:100%;
    height:300px;
    display:block;
    background:#ddd;    
}
.product img:after {
    content: "20% Off!";
    padding:5px;
    position:absolute;
    top:0;
    right:0;
    z-index:3;
    color:#fff;
    background:#c00;
}