本文目錄導(dǎo)讀：

1. 使用相對定位
2. 使用偽元素

CSS技巧：圖片疊加展示

在網(wǎng)頁設(shè)計中，我們經(jīng)常需要將一張圖片顯示在另一張圖片上，以創(chuàng)建獨特的視覺效果和用戶體驗，通過CSS，我們可以輕松地實現(xiàn)這一需求，下面，我們將探討如何使用CSS實現(xiàn)圖片疊加顯示。

使用相對定位

我們可以通過相對定位來實現(xiàn)圖片疊加，為容器設(shè)置相對定位，然后為每個圖片元素設(shè)置***定位，并調(diào)整其位置以實現(xiàn)疊加效果。

HTML結(jié)構(gòu)示例：

<div class="image-container">
  <img src="image1.jpg" class="bottom-image" />
  <img src="image2.jpg" class="top-image" />
</div>

CSS樣式示例：

.image-container {
  position: relative;
  width: 500px; /* 根據(jù)需要設(shè)置容器寬度 */
  height: 500px; /* 根據(jù)需要設(shè)置容器高度 */
}
.bottom-image, .top-image {
  position: absolute;
  top: 0; /* 調(diào)整圖片位置以實現(xiàn)疊加效果 */
  left: 0; /* 調(diào)整圖片位置以實現(xiàn)疊加效果 */
}
.top-image {
  /* 可以添加其他樣式，如透明度、大小調(diào)整等 */
}

使用偽元素

另一種方法是使用CSS偽元素(::before或::after)來插入背景圖片，然后將疊加的圖片作為內(nèi)容圖片顯示，這種方法可以實現(xiàn)更為靈活的布局和樣式控制。

HTML結(jié)構(gòu)示例：

<div class="image-container">
  <img src="image2.jpg" /> <!-- 疊加的圖片作為內(nèi)容圖片 -->
</div>

CSS樣式示例：

.image-container {
  position: relative; /* 設(shè)置相對定位 */
  background-image: url('image1.jpg'); /* 背景圖片 */
  background-size: cover; /* 背景圖片覆蓋整個容器 */
}

通過以上兩種方法，我們可以輕松實現(xiàn)將一張圖片顯示在另一張圖片上的效果，在實際應(yīng)用中，可以根據(jù)需求和設(shè)計目標選擇適合的方法。