混合模式叠加实验室 - 图层与颜色交互

mix-blend-mode 是 CSS 的一个属性，用于控制元素内容与其下方元素（或背景）的混合方式，类似于 Photoshop 中的图层混合模式。它让网页元素能够以多种算法（如正片叠底、滤色、叠加等）与底层像素进行颜色混合，创造出丰富的视觉效果，无需借助图片编辑软件。

mix-blend-mode 作用于整个元素（包括其所有内容、文字、子元素），与该元素下方的任何内容混合。
background-blend-mode 仅作用于元素自身的多个背景图层之间（如同时设置了背景颜色和背景图片），不影响元素外部的内容。两者可以结合使用，创造更复杂的混合效果。

multiply（正片叠底）：适合叠加纹理、水印、阴影，白色会变透明。
screen（滤色）：适合创建光晕、高光效果，黑色会变透明。
overlay（叠加）：同时进行正片叠底和滤色，增强对比度，适合照片调色。
soft-light（柔光）：柔和的对比增强，类似在图像上打一层柔光。
difference（差值）：产生反转色效果，适合创意艺术效果和测量对齐。
color（颜色）：保留底层亮度，仅应用顶层颜色，适合着色。

① 文字与背景图片的融合：使用 mix-blend-mode 让文字与图片产生艺术化混合效果。
② 悬停效果：卡片悬停时通过混合模式改变颜色，比直接替换背景更自然。
③ 纹理叠加：在整个页面上叠加一层噪点或纸质纹理（multiply 模式）。
④ 双色调设计：使用 color 或 hue 模式快速实现双色调风格。
⑤ 渐变叠加：在图片上叠加渐变并使用 overlay/soft-light 模式，制作精美的 banner。

mix-blend-mode 和 background-blend-mode 在所有现代浏览器中都有良好支持，包括 Chrome 45+、Firefox 32+、Safari 8+、Edge 79+。IE 浏览器不支持此属性。截至2025年，全球浏览器覆盖率超过97%，在生产环境中可以安全使用。对于不支持的浏览器，建议提供降级方案（如使用 opacity 或纯色覆盖）。

常见原因：① 元素没有与其下方的内容发生重叠（需确保元素确实叠在另一个元素或背景之上）；② 父元素或该元素自身设置了 isolation: isolate，这会阻止混合；③ 元素使用了 3D 变换（如 transform: translateZ(0)），可能创建新的堆叠上下文影响混合；④ 在 <canvas> 或 <video> 元素上使用时需注意跨域限制；⑤ 检查是否在正确的元素上应用了该属性。

直接将 mix-blend-mode 应用在文字元素上即可。例如：h1 { mix-blend-mode: difference; color: white; } 会让白色文字在亮色背景上显示为黑色，在暗色背景上显示为白色，产生智能反色效果。文字会与下方所有可见内容进行混合，但文字元素自身的背景（如果有）也会参与混合。建议文字元素本身使用透明背景。