🎭
混合模式预览
对比 mix-blend-mode 各种值（multiply、screen、overlay…）在图文上的叠加效果并复制。
本地处理 · 不上传
加载工具中…
相关：blend · 混合模式 · mix-blend-mode · 叠加 · css
混合模式预览并排展示 mix-blend-mode 与 background-blend-mode 的全部取值效果，直观对比正片叠底、滤色、叠加等模式的差异。
使用步骤
- 上传或选择两张图层
- 逐个查看各混合模式
- 对比效果差异
- 复制需要的取值
使用场景
- 为图片添加色调滤镜效果
- 让文字与背景图产生融合
- 制作双色调风格的图片
- 做图层叠加的视觉设计
小贴士
- multiply（正片叠底）让画面变暗、screen（滤色）让画面变亮，这两个是最常用也最容易预测的模式。
- mix-blend-mode 作用于元素与其背后的内容，background-blend-mode 只作用于同一元素的多个背景层，用错位置就没效果。
- 混合模式会创建层叠上下文，可能影响 z-index 的表现，复杂布局中要留意。
常见问题
两个属性有什么区别？
mix-blend-mode 让整个元素与页面上它背后的内容混合；background-blend-mode 只混合同一个元素内部的多个背景图层，不影响元素之外。
为什么设了没效果？
检查背后是否真的有可混合的内容——若父容器是白色不透明背景，多数模式的结果就是原图。另外某些模式在纯白或纯黑背景上本就无变化。
性能开销大吗？
混合模式需要 GPU 逐像素计算，大面积或多层叠加时移动端可能掉帧。静态展示通常没问题，但不建议与滚动动画同时使用。
混合模式预览是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用混合模式预览，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。