png - 在另一张 .jpg 图像上显示一个 .png 图像

Question

我有以下代码:

<img style="background: url(./image/data/logo.png) no-repeat top right" src="./image/data/picture.jpg" />

现在，它在 picture.jpg 图像下显示了 logo.png。如何使其显示在 .jpg 图片上方？

谢谢。

Answer 1

您必须使用 2 张图像才能做到这一点。 img 必须具有绝对位置(您希望位于另一个之上的位置)。
不要忘记容器必须具有position:relative 才能包含绝对的 png。
这是示例:

http://jsfiddle.net/jNpaH/

html 标签:

<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png" class="png-over" /> <img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" /> </div>

样式:

.image{position:relative}
.png-over{position:absolute; top:0; left:0}

---

该技术的问题是您的代码会充斥着图像标签。
使用 jQuery 解决此问题的一种方法是找到每个具有“images”类的 div 容器，并在每个容器前面添加图像标签。
这是示例:
http://jsfiddle.net/jNpaH/2/