基於來自背景的像素顯示圖像

我需要的是我在網站上插入圖像1。在我做了這些之後，我想要顯示圖像2的相對位置，頂部5等內部圖像1.因此，如果我移動圖像1，圖像2仍然會在圖像1上的相同位置。基於來自背景的像素顯示圖像

I嘗試將圖像2的相對位置放置在圖像1上。但是當我移動圖像1時，圖像2仍舊處於舊位置。

CSS

.image1 { 
    background-color:#F2630A; 
    margin:10px; 
    padding:10px; 
    height:250px; 
    width:250px; 
} 
.image2 img { 
    // Here I'm lost. Tried with position relative but it's not a good way. 
}

HTML

<div class="image1"> 
    <div class="image2"> 
     <img src="items/test.gif"> 
    </div> 
</div>

來源

2014-02-18 user3186716

你有沒有嘗試在'.image2'上設置'position：relative'而不是'.image2 img'？ – anurupr

@anurupr，是的，我有。相同的輸出 – user3186716

'.image2' shuld被絕對定位到'.image1'，它應該有'position：relative' –

您可以爲結合absolute和relative定位。如果我正確理解你的問題，下面應該達到你所需要的：

.image1 { 
    position: relative; 
    background-color:#F2630A; 
    margin:10px; 
    padding:10px; 
    height:250px; 
    width:250px; 
} 

    .image1 .image2 { 
     position: absolute; 
     top: 5px; 
     left: 5px; 
     width: 240px; 
     height: 240px; 
    } 
     .image1 .image2 img { 
      max-width: 100%; 
     }

jsFiddle Demo

來源

2014-02-18 10:12:57 BenM

謝謝，正是我在尋找的！ – user3186716

製作父母絕對和孩子相對

像image1的應該是絕對的，像2應該是相對

來源

2014-02-18 10:27:48 Shube

基於來自背景的像素顯示圖像

回答

相關問題