2

我正在尝试将一个 img 放在另一个 img 上，因为我想要一个剪贴簿的效果，其中的图像被“录制”到主页中。

我想保持胶带层的一致性，让自己在不丢失位置的情况下改变下面的图像。

HTML：

<div id="container">
    <div id="content">
        <img class="gesture" src="http://i.imgur.com/rWgpQ6b.jpg" alt="Rain Hands" title="Rain Hands" />
        <img class="tape" src="http://oi50.tinypic.com/nezz12.jpg" alt="tape" title="tape" />

        <div class="text">
            <h2>Rain Hands</h2>
            <p>"When someone complains, 'I just felt a raindrop!,' the easiest way to prove his or her statement is to break out the Rain Hands. Hold both hands, palms facing upwards, out towards the sky. If you feel drops, then it is indeed raining. If you don't, then it isn't. Rain hands are fool-proof."<br /><br /><strong>Submitted By: </strong>Shaun</p>
        </div>
    </div>
</div>

CSS：

.gesture {
margin-left: 0;
margin-top: 45px;
width: 350px;
float: left; }

.tape {
margin-left: 10px;
margin-top: 45px;
position: absolute;
float: left;
width: 350px;
z-index: 1;}

我得到的是：

http://oi50.tinypic.com/28s8x8j.jpg

但我希望胶带位于图像的角落之上。

4

3 回答 3

0

我实现这一点的方法是制作一个包装器 div (class="image") 将照片和磁带图形放置在其中。然后将磁带图像包装在另一个绝对定位的 div 中。现在您可以使用 top:left: 来定位磁带图形，使其匹配。在您的示例中，磁带对于您的示例图像来说太高了。如果您要拥有不同的图像尺寸，制作两张磁带图像可能是明智之举，一张用于顶部，一张用于底部，并使用 top: 和 right: 和 bottom: 和 left: 定位它们：

<style>
.image{
position:relative;
}

.gesture {
margin-left: 0;
margin-top: 45px;
width: 350px;
float: left; }

.tape {
left: 10px;
top: 45px;
position: absolute;
float: left;
width: 350px;
z-index: 1;}
</style>


<div class="image">
<img class="gesture" src="http://i.imgur.com/rWgpQ6b.jpg" alt="Rain Hands" title="Rain Hands" />
<div class="tape"><img src="http://oi50.tinypic.com/nezz12.jpg" alt="tape" title="tape" /></div>
</div>
于 2013-04-15T18:07:34.217 回答
0

将磁带放在 div 之外container：

 <img class="tape" src="http://oi50.tinypic.com/nezz12.jpg" alt="tape" title="tape" />
<div id="container">
    <div id="content">
        <img class="gesture" src="http://i.imgur.com/rWgpQ6b.jpg" alt="Rain Hands" title="Rain Hands" />


        <div class="text">
            <h2>Rain Hands</h2>
            <p>"When someone complains, 'I just felt a raindrop!,' the easiest way to prove his or her statement is to break out the Rain Hands. Hold both hands, palms facing upwards, out towards the sky. If you feel drops, then it is indeed raining. If you don't, then it isn't. Rain hands are fool-proof."<br /><br /><strong>Submitted By: </strong>Shaun</p>
        </div>
    </div>
</div>

jsFiddle：http: //jsfiddle.net/hescano/bb5JC/

于 2013-04-15T18:01:21.973 回答
0

试一试#content {position: relative;}，去掉浮子上的.tape。

于 2013-04-15T18:01:32.650 回答