將img覆蓋在另一個img上

在下面的HTML中，我希望小型刪除圖標出現在其容器（div）的左上角。較大的圖像（一隻貓）需要放在div和scale中，以便它不超過div的高度。由於其他地方的使用方式，我需要將div左移。假設刪除圖標覆蓋在較大的圖像上（如果較大的圖像填充div的寬度）。請注意，較大的圖像實際上可能具有比div小得多的寬度，並且它以div爲中心。在這種情況下，刪除圖標仍位於左上角，但由於較大的圖像太小，所以不會真正覆蓋較大的圖像。無論較大圖像的寬度如何，div的寬度始終保持不變。將img覆蓋在另一個img上

這裏是我的html：

<div style="float:left; width:120px; height:90px; text-align:center; border:1px solid #c0c0c0"> 
    <img src="http://hellopune.mobi/site2/Images/icon_delete.png" /> 
    <img src="http://www.petfinder.com/wp-content/uploads/2012/11/100691619-what-is-cat-fostering-632x475.jpg" style="height:90px" /> 
</div>

而且在小提琴手： http://jsfiddle.net/AndroidDev/eJZ7X/

來源

2014-01-15 AndroidDev

你需要這樣的事？

Demo

div { 
    position: relative; 
} 

div img { 
    max-width: 100%; 
    max-height: 100%; 
} 

div img:first-of-type { 
    position: absolute; 
    top: 5px; 
    right: 5px; 
}

這裏，我定位刪除img到absolute與top和right屬性，如果你想left比你可以做到這一點，並確保你包他們position: relative;容器內。

注：我使用first-of-type僞，所以你不必改變你的 DOM，但如果你認爲img的順序可能比換好分配class到刪除img代替。

你覺得我的選擇是太普通了，假設你有一個名爲.img_holderclass父母，這將有div進一步嵌套和比你窩兩個img內，如此你的選擇將是

.img_holder > div { 
    position: relative; 
} 

.img_holder > div > img { 
    max-width: 100%; 
    max-height: 100%; 
} 

.img_holder > div > img:first-of-type { 
    position: absolute; 
    top: 5px; 
    right: 5px; 
}

和DOM看起來像

<div class="img_holder"> 
    <div> 
     <img src="#" /> 
     <img src="#" /> 
    </div> 
    <div> 
     <img src="#" /> 
     <img src="#" /> 
    </div> 
    <div> 
     <img src="#" /> 
     <img src="#" /> 
    </div> 
</div>

來源

2014-01-15 09:30:46

您也可以擺脫很多從原來的小提琴的造型，以及：http://jsfiddle.net/crazytonyi/eJZ7X/3/ – Anthony

看起來像它。相反，我可以使用右上角的刪除按鈕。我仍然有一個問題，但。我不確定如何將您的CSS與每個元素上列出的CSS相結合。我需要使用樣式，因爲我需要重複多個div。你寫它是非常通用的。你能把我的風格移到你的名字上嗎？對不起，但我有點失落如何做到這一點。 – AndroidDev

@Anthony Ya謝謝你，內聯樣式總是很爛.. –

我已經更新了你的小提琴here

圖標img現在有一個圖標類，並絕對定位在div中。

HTML：

<div style="float:left; width:120px; height:90px; text-align:center; border:1px solid #c0c0c0"> 
    <img class="icon" src="http://hellopune.mobi/site2/Images/icon_delete.png" /> 
    <img src="http://www.petfinder.com/wp-content/uploads/2012/11/100691619-what-is-cat-fostering-632x475.jpg" style="height:90px" /> 
</div>

CSS：

.icon { 
    position: absolute; 
}

來源

2014-01-15 09:32:16 donnywals

將img覆蓋在另一個img上

回答

相關問題