无需登录 数据私有 本地保存

图层混合模式演示 - 叠加/柔光等在线比较

12
0
0
0
底层图片
上层图片
拖动上层
OVERLAY · 叠加
对比原始 拖动上层图片查看不同区域混合效果
混合模式 Blend Mode
底层 Base Layer
🎨 预设图案 🟦 纯色 🖼️ 上传图片
当前：预设渐变图案
上层 Blend Layer
🎨 预设图案 🟦 纯色 🖼️ 上传图片
当前：预设纹理图案
上层不透明度
100%
上层缩放
100%

图层混合模式常见问题

什么是图层混合模式（Blend Mode）？
图层混合模式决定了上层图层如何与下层图层进行像素级的颜色混合。每种模式使用不同的数学算法来计算最终显示的颜色。混合模式广泛应用于图像编辑软件（如Photoshop）、CSS渲染和图形设计中，用于创建各种视觉效果，如叠加纹理、调整对比度、色彩校正等。CSS通过mix-blend-mode属性原生支持16种混合模式。
叠加（Overlay）模式和柔光（Soft Light）有什么区别？
叠加（Overlay）：结合了正片叠底（Multiply）和滤色（Screen）两种模式。在底层亮度低于50%的区域使用Multiply使其更暗，在底层亮度高于50%的区域使用Screen使其更亮。结果是对比度增强，高光更亮、阴影更暗，50%灰色区域保持不变。

柔光（Soft Light）：类似叠加但更柔和。它使用一种更平滑的算法，效果像是用柔和的光源照射底层。柔光模式对比度提升较温和，适合人像修饰和微妙的纹理叠加。简单来说，Overlay更强烈、更有戏剧性；Soft Light更细腻、更自然。
CSS mix-blend-mode 支持哪些混合模式？
CSS的mix-blend-mode属性支持16种模式：normal（正常）、multiply（正片叠底）、screen（滤色）、overlay（叠加）、darken（变暗）、lighten（变亮）、color-dodge（颜色减淡）、color-burn（颜色加深）、hard-light（强光）、soft-light（柔光）、difference（差值）、exclusion（排除）、hue（色相）、saturation（饱和度）、color（颜色）、luminosity（明度）。所有现代浏览器均支持。
叠加模式适合什么场景使用？
叠加模式是最常用的混合模式之一，适合：① 纹理叠加——将纹理图片叠加到照片上增加质感；② 对比度增强——复制图层并设为叠加来增强照片对比度；③ 光影效果——叠加光斑或阴影素材创造氛围；④ 双重曝光——将两张图片以叠加模式混合创造艺术效果。使用50%灰色的图层叠加不会产生任何变化，这一特性可用于创建"中性"叠加层。
不透明度（Opacity）如何影响混合模式？
不透明度控制上层图层对混合结果的贡献程度。不透明度为100%时，混合模式完全生效；不透明度为0%时，上层完全透明，只显示底层。降低不透明度可以减弱混合效果的强度，这是精细调整混合效果的重要手段。例如，将叠加模式的不透明度降至50%，可以获得更自然的对比度增强效果。在我们的工具中，您可以使用不透明度滑块实时调整并观察变化。
🔧 相关工具