CSS颜色混合模式multiply与overlay的区别_图层混合效果解析

multiply通过相乘变暗，适合阴影叠加；overlay根据底色明暗动态调整，增强对比并保留细节，常用于质感提升。

在CSS中，multiply 和 overlay 是两种常用的图层混合模式（blend modes），它们都用于控制两个重叠元素之间的颜色如何交互。虽然它们在视觉上有时看起来相似，但底层计算方式和适用场景有明显区别。

multiply 模式：变暗型混合

multiply 的核心逻辑是将上方图层的颜色与下方图层的颜色对应通道值相乘，再除以255（对于8位颜色）。结果通常比原始两层都更暗。

• 公式：(top × bottom) / 255
• 白色在 multiply 中相当于“透明”——因为乘以白色（255）不会改变底色
• 黑色会把对应区域变为黑色——任何颜色乘以黑色（0）结果为0
• 适合用于阴影、加深背景、叠加纹理等需要整体变暗的效果

举例：一张半透明的深色图层叠加在彩色背景上，使用 multiply 后，背景颜色会变得更深，保留原有色调信息。

overlay 模式：叠加增强对比

overlay 实际上结合了 multiply 和 screen 两种模式，根据底层颜色的明暗程度动态选择变暗或提亮。

Lumen5

一个在线视频创建平台，AI将博客文章转换成视频

105

查看详情

立即学习“前端免费学习笔记（深入）”；

• 底层颜色较暗（小于128）时，执行类似 multiply 的变暗操作
• 底层颜色较亮（大于128）时，执行类似 screen 的提亮操作
• 中间灰（128）在 overlay 下不受影响
• 能同时增强图像的对比度和细节，常用于非破坏性修图或质感叠加

比如将一个噪点纹理或云彩图层设为 overlay，可以自然地提升背景的立体感而不完全覆盖原图。

关键区别总结

• multiply 始终让画面变暗，适合统一压暗或投影效果
• overlay 根据底层明暗智能选择变暗或提亮，保留高光和阴影细节，增强对比
• multiply 更“温和线性”，overlay 更“强烈动态”
• 两者对白色和黑色的反应不同：multiply 忽略白色，overlay 可能提亮亮区

基本上就这些。理解它们的数学逻辑能帮助你在设计光影、纹理叠加或滤镜效果时做出更精准的选择。实际应用中建议结合 opacity 调整强度，避免过度混合导致画面脏乱。

以上就是CSS颜色混合模式multiply与overlay的区别_图层混合效果解析的详细内容，更多请关注php中文网其它相关文章！