CSS 混合模式预览

查询 CSS mix-blend-mode / background-blend-mode 常用取值的含义与示例，包括 normal、multiply、screen、overlay、darken、lighten、color-dodge、soft-light、difference、hue、luminosity 等。全部在浏览器本地完成。

混合模式查询等待输入

输入混合模式名称，例如 multiply、screen、soft-light。

计算结果

收录条目—

当前结果—

输入混合模式名称后点击查询，结果将显示在这里。

说明依据 CSS 规范整理；结果仅供参考。

计算说明

mix-blend-mode 决定元素与其下方内容如何混合。
multiply 变暗、screen 变亮，是最常用的组合。
overlay、soft-light、hard-light 可增强对比与质感。
hue、saturation、color、luminosity 属于「非分离」混合模式。
混合模式需注意与 isolation、层叠上下文的相互影响。