HTML/CSS - 將img放在img之上？

Question

我有兩個PNG的。一個是實際圖像，另一個是大多數透明圖像，右上角有一個貼紙價格圖標。我知道我可以將它們結合在Photoshop中，並創建一個圖像。

但我需要這些動態生成的一堆不同的基礎圖像。

有沒有某種方法來編碼「實際圖像」，然後使用代碼覆蓋「透明貼紙圖像」？

Answer 1

您需要將position屬性設置爲relative或absolute，將左側和頂部屬性設置爲所需值，然後將z-index屬性設置爲1（假設您沒有其他z-index屬性已經設置）。請記住，如果圖像應該在沒有改變的頂部和左側屬性的情況下呈現，應該有一個空間。

Answer 2

當然，最簡單的方法將兩個圖像的容器內的絕對定位：

<div style="position:relative"> 
    <img src="main-image.jpg" style="position:absolute;"/> 
    <img src="overlay-image.png" style="position:absolute;"/> 
</div> 

容器上的position:relative需要對兒童工作的絕對定位。當然，如果容器本身已經完全定位，那就沒問題了。

的position:absolute是不所需的基本圖像上，如果兩個圖像的左上角，而擁有它可以讓你如果需要調整它的位置。

你也可以使用靜態的位置在主圖像和相對位置覆蓋圖像上：

<div style="position:relative"> 
    <img src="main-image.jpg" style="width:100px"/> 
    <img src="overlay-image.png" style="position:relative; left:-100px"/> 
</div> 

，但這個工作你需要知道的基本圖像的寬度。

Answer 3

將圖像包裝在<div>中，首先使用重疊圖像，然後將實際圖像作爲第二個圖像，並將div的css設置爲position: relative。

然後可以給出這兩個圖像的css {position: absolute; top: 0; left: 0;}。

<div style="position:relative;"> 
    <img src="overlay.png" style="position: absolute; top: 0; left: 0;"> 
    <img src="actual.png" style="position: absolute; top: 0; left: 0;"> 
</div>` 

如果你真的想要安全，你可以設置每個圖像的z-index。