CSS - 将另一张图片重叠在另一张图片上

Question

我无法用言语来最好地描述这一点，所以我会带照片给您看。

这里是我的设计师是如何打算的的Gravatar图像在我们网站的侧边栏查看：

how the designer wants it http://i41.tinypic.com/rjnn6v.png

这里的叠加图像我做了（从Photoshop screenshotted）：

my overlay image http://i43.tinypic.com/s1sz2e.png

以下是它现在的样子...

not quite ideal 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来强制两张图片叠加？也许这样？ 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;} 

Answer 2

你不能在相对定位的地方使用？在gravatar图像上？

我不得不想知道为什么你有图像本身的容器外的覆盖div。至少他们应该是兄弟姐妹。制作一个仅保存图像和覆盖图的容器，然后使覆盖图位于绝对位置0,0处于图像顶部。

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