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

如何将一个图像叠加到另一个图像上

1 个答案: