如何在另一幅圖像上疊加10x10px圖像？

Question

我在我的網站上有一個用戶頭像。簡單的圖片標籤：

<img src="foo.jpg" class="userphoto" width="48" height="48" alt=""> 

現在，我想浮動圖像（Facebook的圖標 - 10x10px）在對圖像的左上角這一形象。

這表示用戶已通過Facebook身份驗證。

我該怎麼做？圖像標籤上的CSS樣式，還是我必須有絕對定位的單獨div？

不需要透明或任何東西，只需要準確定位在左上角。

當然，我不能只是在物理上修改圖像，因爲我需要確定是否根據Facebook狀態動態地疊加圖像。但我希望能動態添加一個CSS類。

任何想法？

答：

得到它與兩個答案的組合工作。使用div而不是其他圖像。

HTML：

<div class="foo"> 
    <div class="fboverlay"></div> 
    <a> 
     <img src="foo.jpg" class="userphoto" width="48" height="48" alt=""> 
    </a> 
</div> 

CSS：

.foo 
{ 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

.fboverlay 
{ 
    background-image: url('/image/facebook/logo.gif'); 
    position: absolute; 
    z-index: 1; 
    top: 10px; 
    left: 10px; 
    width: 10px; 
    height: 10px; 
} 

感謝您的幫助。

Answer 1

我知道我沒有使用您想要的確切尺寸，但這裏有一個適合您的工作示例。 （您將需要父「.main_photo」分區是主要的照片的尺寸。）

.main_photo{ 
 
    position:relative; 
 
    width:80px; 
 
    height:80px 
 
} 
 
.inlay{ 
 
    position:absolute; 
 
    top:5px; 
 
    right:5px 
 
}

<div class="main_photo"> 
 
    <img src="https://secure.gravatar.com/avatar/?s=200&d=mm&r=pg" /> 
 
    <img class="inlay" src="https://www.rit.edu/news/lib/views/public/images/dateline_images/facebook_icon.gif" /> 
 
</div>

Answer 2

首先你必須要position它 - 無論是相對的還是絕對的。

其次，如果還有其他定位元素，則必須設置z-index，儘管您可能不一定需要其中一個元素。

使用top/left或bottom/right組合將圖像疊加在另一個上。

這是沒有看到任何HTML/CSS的建議。根據情況它顯然會有所不同。

#el-on-top { position:absolute; top:0; left:0; z-index:1; } 

您可能需要設置position:relative所以AP'd元素上是相對的東西，而不是說，包裝或整個頁面。