如何通过CSS mix-blend-mode属性制作双重曝光视觉效果？-css教程-PHP中文网

直接给两张加mix-blend-mode通常无效，因为二者默认处于同一层叠上下文且无“上下”关系；需用position: absolute构造视觉重叠，并确保容器有非白背景、未触发isolation或transform等隔离属性。

如何通过css mix-blend-mode属性制作双重曝光视觉效果？

直接给两张 <img> 加 mix-blend-mode 通常没效果——因为浏览器默认把它们放在同一层叠上下文里，没有“上下层”关系可混。得手动构造重叠结构，且必须确保底层内容真实存在、可见、非纯白。

为什么两张图片叠一起却看不到混合效果？

常见错误是把两个 <img> 并列写在 HTML 里，然后只给其中一个加 mix-blend-mode: screen。问题在于：mix-blend-mode 不作用于兄弟元素之间，而是作用于“当前元素”与其**z 轴下方的内容**（比如父容器背景、伪元素、或 position: absolute 的底层元素）。

两张 <img> 默认都在同一 stacking context，彼此不构成“上下”关系
父容器没设背景色/图 → 下方是纯白或透明，screen 混合后几乎看不出变化
用了 transform、opacity: 0.99 或 isolation: isolate → 隔离了层叠上下文，混合被切断

怎么构造可靠可用的双重曝光结构？

核心是让一张图当“底”，另一张当“叠层”，且叠层必须参与混合。推荐用 position: absolute + 容器 position: relative 控制层级。

外层容器设 position: relative，并提供非白色背景（哪怕只是 background: #eee）
第一张图（底图）用 position: absolute; top: 0; left: 0; width: 100%; height: 100%
第二张图（叠层）同样 position: absolute，但加 mix-blend-mode: screen 或 multiply
避免对容器设 isolation: isolate，除非你明确需要隔离其他子元素

示例结构：

Blender Bpy Enhanced

通过 Python bpy API 实现全面的 Blender 自动化，涵盖程序化建模、材质节点、灯光、渲染和资产生成，包含已验证的齿轮/...

下载

.dual-exposure {
  position: relative;
  width: 400px;
  height: 300px;
  background: #f5f5f5; /* 关键：非白底 */
}
.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;
}