受团队信任
动态控制你的堆叠元素的颜色混合在一起的混合模式。
如果你曾经使用过照片编辑软件，在Webflow中混合模式会感觉像第二天性。当元素(类似于图层)相互堆叠时，混合可以根据选择的模式实现不同的视觉效果。您可以在Webflow Designer中实时预览所选元素上的每种混合模式——您可以在不使用任何定制代码的情况下完成所有这些工作。
在这节课中，你将学到:
Webflow中的混合模式为一个元素提供了多种不同的方法来混合(或重叠)下面的其他元素——所有这些都不需要定制代码。Webflow为您处理mix-blend mode CSS属性，并允许您设置元素的内容应该如何与元素的父元素和元素的背景内容混合。混合模式允许你解锁大量创造性的可能性，超越元素的不透明度调整。
你可以这样想:设置了混合模式的顶部元素(前景)与父元素和底部元素(背景元素)重叠并相互作用，产生一个新的最终颜色(来自顶部和底部元素的颜色的组合)。
在Webflow中有16种混合模式影响部分的风格的面板．在混合模式下拉菜单中，行为相似的模式被并排放置。这些模式分组包括:
让我们介绍一下将每种混合模式应用到顶部元素时的作用。
的正常的混合模式是Webflow画布上元素的默认混合模式。最终的颜色是顶部元素的颜色，不管底部元素的颜色是什么。效果就像两张不透明的纸重叠在一起。
顾名思义，在变暗组的混合模式将使最终的颜色变深。顶部元素中的任何白色都将变得不可见，任何比白色更暗的元素将对底部元素产生一些变暗的效果。
变黑模式的结果是由顶部和底部元素的最暗值组成的最终颜色。如果顶部和底部的元素是相同的颜色，则没有变化。
乘模式将顶部和底部元素的颜色相乘。黑色导致最终颜色为黑色，而白色导致没有变化。这种效果就像两个印在透明薄膜上的图像重叠在一起。
乘根据顶部元素颜色的光度值，可以产生许多不同级别的变暗，这使得使元素变暗或创建阴影很方便。
颜色烧模式给出的结果比乘模式通过增加顶部和底部元素颜色之间的对比，这导致更高饱和的中色调和减少高光。顶部元素的白色不会产生变化。
模式下的减轻组使最终的颜色更亮。顶部元素中的任何黑色元素都将变得不可见，任何比黑色更亮的元素将对底部元素产生一些变暗的效果。
减轻模式的结果是由顶部和底部元素的最轻值组成的最终颜色。如果顶部和底部的元素是相同的颜色，则没有变化。
屏幕模式的结果总是一个更亮的颜色。黑色没有变化，而较亮的颜色保持不变。这种效果就像在投影屏幕上闪烁两个重叠的图像。
屏幕模式可以根据顶部元素的光度值产生许多不同级别的增光，这使得增光元素或创建高光很方便。
颜色减淡模式给你的效果比屏幕模式通过减少顶部和底部元素颜色之间的对比，这导致饱和的中色调和吹高光。黑色没有变化。
对比模式是混合模式在暗化和亮化组。他们通过使用互补的混合模式来创造最终的结果，通过亮和暗的最终颜色来创造对比。
大于50%灰色的颜色会有一个变暗的效果。比50%灰色更亮的颜色会有增亮效果。
覆盖模式是一种组合乘而且屏幕模式，底部元素总是占主导地位。覆盖模式使用屏幕模式在一半强度上的颜色比50%灰色浅，并使用乘在比50%灰色暗的颜色上以一半强度模式。50%的灰色会变成透明的。
另一种思考方式是覆盖模式是考虑它是如何转移中间音调的。较暗的顶部元素颜色将中间色调转变为较暗的颜色，而较浅的顶部元素颜色将中间色调转变为较亮的颜色。
柔和的灯光《风尚》的行为很像覆盖模式。它根据亮度值应用增暗或增亮效果，但以一种更微妙的方式。你可以想到柔和的灯光模式的软版本覆盖没有强烈对比的模式。这种效果类似于将散射的聚光灯照射在背景上。
强光模式相结合乘而且屏幕模式使用顶部元素颜色的亮度值来进行计算。结果与强光模式可以是激烈的。这种效果类似于在背景上发出强烈的聚光灯。你可能会发现减少你的元素会有帮助不透明度用这种混合模式得到最好的效果。
对比分组中的混合模式寻找顶部和底部元素颜色之间的变化来创建结果。
区别模式是用较亮的元素颜色减去较暗的元素颜色。白色颠倒了底部元素的颜色，黑色没有产生任何变化，而深灰色应用了轻微的变暗效果。
排除模式产生的效果与之相似，但对比度较低区别模式。白色颠倒了底部元素的颜色，黑色没有产生任何变化，而深灰色应用了轻微的变暗效果。
复合组中的模式使用主色组件(色相、饱和度和亮度)的不同组合来创建最终结果。
色调模式生成的最终颜色具有顶部元素颜色的色相，同时使用底部元素颜色的饱和度和光度。您可以使用色调模式来改变顶部元素的色调，同时保持底部元素的色调和饱和度。
饱和模式生成的最终颜色具有顶部元素颜色的饱和度，同时使用底部元素颜色的色相和光度。纯灰色，没有饱和度，没有效果。
颜色模式产生的最终颜色具有顶部元素颜色的色相和饱和度，同时使用底部元素颜色的光度。这保留了灰度级别，对单色顶部元素上色很有用。
光度Mode的最终颜色具有顶部元素颜色的亮度，同时使用底部元素颜色的色相和饱和度。这种模式产生了相反的效果颜色模式。
默认情况下，元素的混合模式设置为正常的．
预览并添加混合模式画布上的一个元素:
额外的资源:了解更多有关风格的面板．
