混合模式 | wjs-css-effects

normal

multiply

screen

overlay

difference

lighten

关键点

混合模式通过 mix-blend-mode 控制元素与其背后内容的颜色混合方式
常用模式有 multiply 正片叠底、screen 滤色、overlay 叠加等
混合模式能创造出常规 CSS 无法实现的色彩融合效果，适合创意设计
可用于文字与图片的融合、双色调图片、彩色投影等创意场景
注意 isolation 属性可创建隔离组，阻止混合模式影响更底层的元素

效果说明

mix-blend-mode 决定元素与其背后内容如何混合像素。这里用紫粉两个重叠圆，分别演示 6 种常用混合模式：normal（正常覆盖）、multiply（正片叠底，变暗）、screen（滤色，变亮）、overlay（叠加，对比增强）、difference（差值，反相）、lighten（取亮）。混合模式能创造出叠加层难以企及的色彩效果。