前端Wiki/词条/mix-blend-mode 混合模式

mix-blend-mode 混合模式

定义让元素与其「背后内容」按规则混合（正片叠底、滤色、变暗等），图层效果的核心

mix-blend-mode 决定本元素与背后层如何混合：multiply（正片叠底，越叠越暗、白色透明）、screen（滤色，越叠越亮、黑色透明）、difference（差值，反相碰撞）等十几种。背景隔离 isolation: isolate 可防止混合穿透到更外层。

典型场景：文字盖在图片上用 multiply 让文字与图融合；彩色光晕用 screen 叠加；UI 焦点用 difference 做互补色提示。background-blend-mode 则是元素自身多层背景之间的混合。

mix-blend-mode 混合本元素与背后层；background-blend-mode 混合自身多层背景
multiply 白色变透明、screen 黑色变透明——去底神器
isolation: isolate 防止混合漏到祖先层级

HTML

<style>
  .mix { background: linear-gradient(45deg,#f778ba,#4a9eff); height: 90px;
         display: flex; align-items: center; justify-content: center; }
  .mix h2 { color: #fff; mix-blend-mode: difference; font-size: 30px; }
</style>
<div class="mix"><h2>差值混合文字</h2></div>

⚠ 常见误区

expecting 在白色背景 multiply 变「变暗」——对，但白底上看不见白色文字
背景不加 isolation，文字混合穿透到更外层页面
对整块大图用 difference，晃眼不适合阅读场景

🔗 相关词条filter 滤镜与混合模式背景与 background-size