CSS - 将一个图像叠加在另一个图像之上

Question

我不能用文字来形容这个,所以我会给你看图片.

以下是我的设计师打算在我们网站的侧边栏中查看Gravatar图像的方式:

设计师如何想要它http://i41.tinypic.com/rjnn6v.png

这是我制作的叠加图像(从Photoshop截取):

我的叠加图片http://i43.tinypic.com/s1sz2e.png

这是它现在的样子......

不太理想http://i42.tinypic.com/21j13s3.png

不太理想,我想你会同意的.这是我正在使用的CSS代码:

.gravatarsidebar {
    float:left; 
    padding:0px;
    width:70px;
}

.gravataroverlay {
 width:68px;
 height:68px;
 background-image: url('http://localhost:8888/images/gravataroverlay.png');
}

这里是XHTML(和一些PHP来根据用户的电子邮件地址获取Gravatar,这是从我们的数据库中获取的):

<div class="gravataroverlay"></div>

        <div class="gravatarsidebar">
            <?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68';
            echo '<img src="' . $gravatar_link . '" alt="Gravatar" />'; ?>  
        </div>

那我该怎么办？我无法使用相对定位,因为它使下面div中的"搜索"一词保持向右移动.

谢谢你的帮助!

插口

Answer 1

您是否尝试过使用z-index强制覆盖两个图像？也许是这样的？ 这是一个伪示例.

<div class="gravatar-sidebar">
     <img class="overlay-image" src="images/gravataroverlay.png" />
     <?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68';
     echo '<img src="' . $gravatar_link . '" alt="Gravatar" class="gravatar-image"/>'; ?>
</div>

/*CSS*/
.gravatar-sidebar {float:left;padding:0px;width:70px;position:relative;}
img.overlay-image{position:absolute;left:0px;top:0px;z-index:10;}
img.gravatar-image{position:absolute;left:0px;top:0px;z-index:1;}