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必须是绝对位置（你想要的位置是另一个）。
不要忘记容器必须有位置：相对位以包含绝对的png。
这是一个例子：

http://jsfiddle.net/jNpaH/

html标签：

＆lt; div class =“image”＆gt;
＆lt; img src =“http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png” class =“png-over”/＆gt; ＆lt; img src =“http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png” /＆GT; ＆LT; / DIV＆GT;

风格：

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

该技术的问题在于您的代码会被图像标记发送垃圾邮件使用jQuery解决它的一种方法是使用类“images”找到每个div容器，并在每个容器前面添加图像标记。
这是一个例子：
http://jsfiddle.net/jNpaH/2/

Answer 2

根据您的代码，我假设您更喜欢使用简短的html代码。但是不可能有一个背景覆盖的image_tag。最干净的方法是使用jQuery：
这是最终的代码：
http://jsfiddle.net/QyMkh/

首先放一个包含所有图像的div。 div必须有一个类，图像不一定需要它。

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

然后在关闭＆lt; / body＆gt;之前在html中添加此jQuery块：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    // store in a variable the url of the image that will be used as background
    var url = 'http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png';

    // select every image_tag that is children of the div with the class 'image'
    jQuery('.image img').each(function() { 
        // every child image will be wrapped inside generated divs with a class 'img-wrap'
        $(this).wrap('<div class="img-wrap"></div>'); 
    });

    // After the images are wrapped, insert the image tag that will work as background, note that instead of using the source I'm using the variable that stores it.
    $('<img src="' + url + '" class="logo" />').prependTo('.img-wrap');
</script>

最后添加这些样式声明以获得所需的效果。

<style type="text/css">
.img-wrap{position:relative}
.img-wrap img.logo{position:absolute; top:0; left:0}
</style>

当您尝试下次编辑时，此代码将保留您的html文档没有不必要的标记。使用image_tag作为背景的一个优点是，使用css可以调整其宽度和高度。尝试添加样式表的新规则：

.img-wrap img.logo { height: 170px; left: 75px; position: absolute; top: 50px; width: 170px}

要结束这一点，如果你想要更多的灵活性，例如你不希望image_tags是div中的容器，请执行以下操作：替换jQuery块的这一行：

jQuery('.image img').each(function() {

用这个

jQuery('.image').each(function() {

并为每个

添加一个class =“image”

<img class="image">

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

2 个答案: