multiply通过相乘变暗，适合阴影叠加；overlay根据底色明暗动态调整，增强对比并保留细节，常用于质感提升。
在CSS中，multiply 和 overlay 是两种常用的图层混合模式（blend modes），它们都用于控制两个重叠元素之间的颜色如何交互。虽然它们在视觉上有时看起来相似，但底层计算方式和适用场景有明显区别。
multiply 模式：变暗型混合
multiply 的核心逻辑是将上方图层的颜色与下方图层的颜色对应通道值相乘，再除以255（对于8位颜色）。结果通常比原始两层都更暗。
- 公式：(top × bottom) / 255
- 白色在 multiply 中相当于“透明”——因为乘以白色（255）不会改变底色
- 黑色会把对应区域变为黑色——任何颜色乘以黑色（0）结果为0
- 适合用于阴影、加深背景、叠加纹理等需要整体变暗的效果
举例：一张半透明的深色图层叠加在彩色背景上，使用 multiply 后，背景颜色会变得更深，保留原有色调信息。
overlay 模式：叠加增强对比
overlay 实际上结合了 multiply 和 screen 两种模式，根据底层颜色的明暗程度动态选择变暗或提亮。
立即学习“前端免费学习笔记（深入）”；
- 底层颜色较暗（小于128）时，执行类似 multiply 的变暗操作
- 底层颜色较亮（大于128）时，执行类似 screen 的提亮操作
- 中间灰（128）在 overlay 下不受影响
- 能同时增强图像的对比度和细节，常用于非破坏性修图或质感叠加
比如将一个噪点纹理或云彩图层设为 overlay，可以自然地提升背景的立体感而不完全覆盖原图。
关键区别总结
- multiply 始终让画面变暗，适合统一压暗或投影效果
- overlay 根据底层明暗智能选择变暗或提亮，保留高光和阴影细节，增强对比
- multiply 更“温和线性”，overlay 更“强烈动态”
- 两者对白色和黑色的反应不同：multiply 忽略白色，overlay 可能提亮亮区
基本上就这些。理解它们的数学逻辑能帮助你在设计光影、纹理叠加或滤镜效果时做出更精准的选择。实际应用中建议结合 opacity 调整强度，避免过度混合导致画面脏乱。
