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

Question

我无法用文字来最好地描述这一点，所以我将用图片向您展示。

以下是我的设计师希望 Gravatar 图片在我们网站的侧边栏中显示的方式:

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

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

不太理想，我想你会同意的。这是我正在使用的 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 中的“搜索”一词保持向右移动。

感谢您的帮助!

jack

Answer 1

您是否尝试过使用 z-index强制两个图像叠加？也许是这样的？ Here is a pseudo example .

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