multiply通过相乘变暗，适合阴影叠加；overlay根据底色明暗动态调整，增强对比并保留细节，常用于质感提升。
在CSS中，multiply 和 overlay 是两种常用的图层混合模式（blend modes），它们都用于控制两个重叠元素之间的颜色如何交互。虽然它们在视觉上有时看起来相似，但底层计算方式和适用场景有明显区别。
multiply 模式：变暗型混合
multiply 的核心逻辑是将上方图层的颜色与下方图层的颜色对应通道值相乘，再除以255（对于8位颜色）。结果通常比原始两层都更暗。
公式：(top × bottom) / 255 白色在 multiply 中相当于“透明”——因为乘以白色（255）不会改变底色 黑色会把对应区域变为黑色——任何颜色乘以黑色（0）结果为0 适合用于阴影、加深背景、叠加纹理等需要整体变暗的效果
举例：一张半透明的深色图层叠加在彩色背景上，使用 multiply 后，背景颜色会变得更深，保留原有色调信息。
overlay 模式：叠加增强对比
overlay 实际上结合了 multiply 和 screen 两种模式，根据底层颜色的明暗程度动态选择变暗或提亮。
博思AIPPT
博思AIPPT来了，海量PPT模板任选，零基础也能快速用AI制作PPT。
117 查看详情 
立即学习“前端免费学习笔记（深入）”；
底层颜色较暗（小于128）时，执行类似 multiply 的变暗操作 底层颜色较亮（大于128）时，执行类似 screen 的提亮操作 中间灰（128）在 overlay 下不受影响 能同时增强图像的对比度和细节，常用于非破坏性修图或质感叠加
比如将一个噪点纹理或云彩图层设为 overlay，可以自然地提升背景的立体感而不完全覆盖原图。
关键区别总结
multiply 始终让画面变暗，适合统一压暗或投影效果 overlay 根据底层明暗智能选择变暗或提亮，保留高光和阴影细节，增强对比 multiply 更“温和线性”，overlay 更“强烈动态” 两者对白色和黑色的反应不同：multiply 忽略白色，overlay 可能提亮亮区
基本上就这些。理解它们的数学逻辑能帮助你在设计光影、纹理叠加或滤镜效果时做出更精准的选择。实际应用中建议结合 opacity 调整强度，避免过度混合导致画面脏乱。
以上就是CSS颜色混合模式multiply与overlay的区别_图层混合效果解析的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/958079.html
微信扫一扫 
支付宝扫一扫 
