HTML5通过CSS定位（position: absolute）和透明度（opacity/rgba）实现图片叠加，核心是相对定位容器内绝对定位多图并控制层级与透明度。
HTML5 本身不直接提供“图片叠加”功能，真正实现多图叠加靠的是 HTML 结构 + CSS 定位（如 position: absolute）和透明度控制（opacity 或 rgba()）。核心思路是：把多张图片放在同一个容器内，用 CSS 让它们层叠显示。
用相对定位容器 + 绝对定位图片实现叠加
这是最常用、最可控的方式。父容器设为 position: relative，子图片设为 position: absolute，它们就会脱离文档流、共享同一坐标系，自然堆叠。
- 父容器高度需显式设置（或由内容撑开），否则可能塌陷看不见图片
- 图片默认堆叠顺序按 HTML 出现顺序：后写的图片在上层；可用
z-index精确控制层级 - 所有绝对定位图片的
top/left值通常设为0，让它们完全重合
用 opacity 或 rgba 控制透明度，让下层图片透出来
叠加后若全遮挡就失去意义，需让上层图片“变透明”。推荐优先使用 rgba() 设置背景色或边框透明，而用 opacity 调整整张图片（含内容）的不透明度。
-
opacity: 0.7表示整体 70% 不透明（即 30% 透明），值越小越透明，取值范围 0–1 - 注意：
opacity会影响元素内所有内容（比如文字、子元素），若只需调图片本身，可考虑用background-image配合rgba()背景色模拟 - 更精细的透明控制可用
background: url(x.jpg) no-repeat; background-color: rgba(255,255,255,0.2);
一个简洁可运行的示例
复制以下代码到 HTML 文件中即可看到两张图叠加效果（第二张半透明覆盖在第一张上）：
立即学习“前端免费学习笔记（深入）”；
<div style="position: relative; width: 400px; height: 300px;"><img src="bg.jpg" style="width: 100%; height: 100%;" alt="背景">
<img src="logo.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.6;" alt="叠加层">
</div>
进阶提示：避免常见坑
- 图片路径错误会导致只显示空白——请确认
src路径正确，建议用开发者工具检查网络请求 - 未设宽高时，
absolute图片可能缩成一团或消失——务必给尺寸（百分比或像素） - 移动端要注意
viewport设置和图片响应式，叠加区域可能错位——可加max-width: 100%; height: auto;防拉伸 - 想实现“混合模式”（如正片叠底、滤色）？CSS 有
mix-blend-mode，但兼容性略低，需按需测试
