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

1. 使用相對(duì)定位實(shí)現(xiàn)圖片疊加

CSS技巧：疊加圖片展示

在網(wǎng)頁(yè)設(shè)計(jì)中，我們經(jīng)常需要展示復(fù)雜的圖片組合，其中一個(gè)常見(jiàn)的需求就是在一張圖片上疊加另一張圖片，通過(guò)CSS，我們可以輕松實(shí)現(xiàn)這種效果，本文將指導(dǎo)你如何利用CSS實(shí)現(xiàn)圖片疊加。

使用相對(duì)定位實(shí)現(xiàn)圖片疊加

我們需要在HTML中創(chuàng)建兩個(gè)圖像元素，并給它們的父元素設(shè)置相對(duì)定位，我們可以使用CSS的position屬性將子圖像定位在父圖像上。

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

<div class="image-container">
  <img src="背景圖片URL" class="base-image">
  <img src="疊加圖片URL" class="overlay-image">
</div>

CSS樣式設(shè)置：

.image-container {
  position: relative; /* 使子元素定位相對(duì)于此容器 */
}
.base-image, .overlay-image {
  position: absolute; /* ***定位使圖片可以疊加在一起 */
  top: 0; /* 調(diào)整疊加位置 */
  left: 0; /* 調(diào)整疊加位置 */
}
.overlay-image { /* 疊加圖片樣式 */
  /* 可以添加透明度、陰影等效果 */
  opacity: 0.5; /* 可選效果，使疊加圖片半透明顯示 */
}

二、利用偽元素(::before 或 ::after)實(shí)現(xiàn)圖片疊加

另一種方法是使用CSS偽元素在圖片上添加另一張圖片，這種方法不需要額外的HTML元素，只需在父元素上添加樣式即可。

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

<div class="image-wrapper">背景圖片</div> <!-- 背景圖片可以是任何元素 -->

CSS樣式設(shè)置：

.image-wrapper::after { /* 在元素內(nèi)容之后插入內(nèi)容 */
  content: ""; /* 必須設(shè)置內(nèi)容屬性為空 */
  position: absolute; /* ***定位使圖片可以疊加在背景圖上 */
  top: 0; /* 調(diào)整疊加位置 */
  left: 0; /* 調(diào)整疊加位置 */
  background-image: url('疊加圖片URL'); /* 添加疊加圖片作為背景圖 */
  /* 可以添加透明度、陰影等效果 */
  opacity: 0.5; /* 可選效果，使疊加圖片半透明顯示 */
}
``` 疊加圖片作為背景圖像時(shí)，可以通過(guò)background-position屬性調(diào)整其在父元素上的位置，你也可以使用其他背景相關(guān)的屬性來(lái)調(diào)整疊加圖片的顯示效果，這種方法更加簡(jiǎn)潔，但需要謹(jǐn)慎處理以確保疊加效果符合設(shè)計(jì)要求，在實(shí)際應(yīng)用中可以根據(jù)項(xiàng)目需求選擇適合的方法來(lái)實(shí)現(xiàn)圖片疊加效果。