如何在不使用合成的情況下重疊 HTML 中的圖片？

在HTML 中定位重疊圖像而不進行合成

您希望在網頁上顯示多個圖像，其中一些圖像位於其他的，出於性能原因而無需訴諸合成。讓我們深入探討解決方案：

要實現圖片重疊，您可以使用 HTML 和 CSS 定位技術。將影像包裝在父容器內並對其應用相對定位。單一影像應該具有絕對定位。

以下是範例程式碼片段：

<div class="parent">
  <img  class="image1 lazy" src="/static/imghwm/default1.png" data-src="blue-square.png" alt="如何在不使用合成的情況下重疊 HTML 中的圖片？" >
  <img  class="image2 lazy" src="/static/imghwm/default1.png" data-src="red-square.png" alt="如何在不使用合成的情況下重疊 HTML 中的圖片？" >
</div>

.parent {
  position: relative;
  top: 0;
  left: 0;
}

.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}

.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
}

在此範例中，父容器具有相對定位，允許子映像相對定位到它。 image1 具有相對定位並保持在其初始位置。 image2 具有絕對定位，並且與父容器的上緣和左邊緣偏移 30px。

透過使用此方法，您可以精確定位影像，而無需合成的開銷。這對於需要動態顯示多張圖片或有複雜定位要求的場景尤其有利。

以上是如何在不使用合成的情況下重疊 HTML 中的圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！