在CSS中實現圖片分層效果，主要通過定位屬性和層疊上下文控制。以下是核心實現方法和示例：

一、核心實現原理

1. 定位方式
   使用 position: relative/absolute/fixed 使圖片脫離文檔流

   .layer {position: absolute; /* 關鍵屬性 */top: 0;left: 0;
   }
   

2. 層疊控制
   通過 z-index 控制層級關系（數值越大越靠上）：

   .layer-front {z-index: 3; /* 頂層 */
   }
   .layer-middle {z-index: 2;
   }
   .layer-back {z-index: 1; /* 底層 */
   }
   

3. 容器設置
   父容器需聲明相對定位作為定位基準：

   .container {position: relative; /* 創建定位上下文 */width: 800px;height: 500px;
   }
   

二、完整實現示例

<div class="image-container"><img src="background.jpg" class="layer-back"><img src="middle-layer.png" class="layer-middle"><img src="foreground.png" class="layer-front">
</div>

/* 容器設置 */
.image-container {position: relative;width: 100%;height: 70vh;overflow: hidden; /* 隱藏溢出內容 */
}/* 基礎圖層樣式 */
.image-container img {position: absolute;width: 100%;height: 100%;object-fit: cover; /* 保持圖片比例 */
}/* 分層控制 */
.layer-back {z-index: 1;filter: blur(2px); /* 背景模糊效果 */opacity: 0.9;
}.layer-middle {z-index: 2;transform: scale(0.8); /* 縮放效果 */top: 10%;left: 15%;
}.layer-front {z-index: 3;clip-path: circle(40% at center); /* 圓形裁剪 */
}

三、進階技巧

1. 混合模式
   使用 mix-blend-mode 實現圖層混合：

   .layer-overlay {mix-blend-mode: multiply; /* 正片疊底 */
   }
   

2. 動畫分層
   為不同圖層添加獨立動畫：

   @keyframes float {0% { transform: translateY(0); }50% { transform: translateY(-20px); }100% { transform: translateY(0); }
   }
   .layer-front {animation: float 3s infinite ease-in-out;
   }
   

3. 偽元素分層
   用 ::before/::after 創建額外圖層：

   .image-container::before {content: "";position: absolute;z-index: 4;background: radial-gradient(circle, transparent 60%, black);
   }
   

四、注意事項

1. 始終明確父容器的 position: relative
2. 避免 z-index 數值跳躍（建議使用連續數值）
3. 使用 will-change: transform 優化動畫性能
4. 移動端注意圖層數量對性能的影響

通過組合這些技術，可創建復雜的視差滾動、3D卡片、動態背景等分層效果，實際應用時需根據具體設計調整圖層的定位參數和視覺效果。