混合模式属性

最后更新：2026-09-13

mix-blend-mode 混合模式属性

mix-blend-mode 用于控制元素的内容如何与其下方元素（背景或相邻元素）进行颜色混合，类似 Photoshop 中的图层混合模式。它能让文字、图片与背景产生丰富的色彩叠加效果，常用于海报、Banner 和艺术感页面设计。

分类
初始值	normal
继承	否
适用于
可动画
CSS 版本	CSS3
状态	标准

📝 语法

mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity;

⚙️ 取值

值	类型	描述
`normal \| multiply \| screen \| overlay \| darken \| lighten \| color-dodge \| color-burn \| hard-light \| soft-light \| difference \| exclusion \| hue \| saturation \| color \| luminosity`	关键字	混合模式

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
mix-blend-mode	✓ v30	✓ v12	✓ v30	✓ v9	✓ v16
所有主流浏览器均支持

提示： multiply（正片叠底）会让白色变透明，常用于白色 logo 与彩色背景融合；screen（滤色）则相反，让黑色变透明。

重要： 混合效果依赖于元素下方的内容；如果元素处于独立的层叠上下文中且下方无内容，则看不到混合效果。

❓ 常见问题

Qmix-blend-mode 和 background-blend-mode 有什么区别？

Amix-blend-mode 控制元素的内容（含背景）与其下方所有内容之间的混合，属于跨元素混合；background-blend-mode 只控制同一个元素内多个背景层之间的混合。想要文字与背景图融合用 mix-blend-mode，想要多张背景图彼此融合用 background-blend-mode。

Q为什么设置了混合模式但没效果？

A常见原因：元素下方没有可混合的内容；元素自身或父元素创建了独立层叠上下文，混合范围被限制；元素完全透明或被下方内容完全遮挡。可以给父元素加 isolation: isolate 明确隔离范围，并检查是否真的存在可混合的下层内容。

Qmultiply 和 screen 混合模式分别在什么场景用？

Amultiply（正片叠底）对白色「友好」——白色与之混合不变色，适合把白色 logo 叠加到彩色背景上形成水印效果；screen（滤色）相反，黑色与之混合不产生影响，适合把深色内容叠加到亮色背景。其他常用：overlay 适合文字与图片融合，difference 可做艺术反色效果。

Qmix-blend-mode 兼容性怎么样？移动端支持如何？

A现代桌面浏览器（Chrome、Firefox、Safari、Edge）自 2015 年左右起完整支持，但旧版本浏览器和部分 WebView 内核存在差异，混合效果可能缺失或表现不一致。移动端 iOS Safari 和 Chrome for Android 均支持。做关键视觉效果时建议提供不依赖混合模式的降级方案。