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>