直接给两张加mix-blend-mode无效，因二者默认同级无z轴重叠；须用position: absolute构建上下层关系，父容器设position: relative，底层图铺满，上层图加mix-blend-mode: screen并调opacity控强度。
mix-blend-mode 能实现双重曝光，但直接给两张 <img> 加上就失效——根本原因是没建立正确的层叠关系和混合上下文。
为什么两张图片堆一起却没效果？
常见错误是这样写：
<div> @@##@@ @@##@@ </div>
问题在于：mix-blend-mode 默认只和“层叠顺序更低”的元素混合，而两个 <img src="a.jpg"> 默认是同级流内元素，没有 z 轴重叠。浏览器不认为它们在“混合”，只是挨着排版。
- 必须用
position: absolute或z-index强制第二张图覆盖第一张 - 父容器需设
position: relative作为定位上下文 - 两张图都要设
width/height拉满，否则只混合局部区域
用 multiply + screen 组合最接近传统双重曝光
Photoshop 里双重曝光常用正片叠底（暗部保留）+ 滤色（亮部提亮）叠加，CSS 中可分别作用于两层：
- 底层图（主图）保持原样，或加
mix-blend-mode: multiply压暗细节 - 上层图（辅助图）设
mix-blend-mode: screen，让其高光透出、阴影隐去 - 若想控制强度，用
opacity调上层图透明度，别用rgba()改背景色——它不适用于<img src="b.jpg">
示例结构：
.dual-exposure {
position: relative;
width: 400px; height: 300px;
}
.dual-exposure img:first-child {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.dual-exposure img:last-child {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
mix-blend-mode: screen;
opacity: 0.8;
}
background-blend-mode 更轻量，但只适用于背景图
如果图片是固定尺寸且作为背景加载（比如 banner 区），用 background-blend-mode 避免额外 DOM 元素更稳妥：
- 语法必须显式声明混合模式，
background-blend-mode: multiply, screen—— 顺序要和background-image中图层顺序一致 - 不能混用
url()和<img>：要么全用background-image，要么全用<img>+mix-blend-mode -
background-size: cover在 Safari 下搭配hard-light易出边缘渲染异常，优先选multiply/screen
典型写法：
.banner {
width: 400px; height: 300px;
background-image:
url("scene.jpg"),
url("portrait.jpg");
background-size: cover;
background-blend-mode: multiply, screen;
}
真机调试时最容易被忽略的点
iOS Safari 和部分安卓 WebView 对 mix-blend-mode 的支持仍不稳定，尤其在滚动或动画中：
- 混合图层若含
transform: translateZ(0)或will-change: transform，可能触发硬件加速导致混合失效 - 系统级色彩管理（如 P3 广色域）会让同一
mix-blend-mode在不同设备上视觉差异明显，不能只靠桌面 Chrome 验收 - 没有 fallback 机制：iOS 15 以下不支持
mix-blend-mode，得用@supports (mix-blend-mode: multiply)包裹并提供降级样式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
