复合和混合模式

有两种模式:阿尔法合成和颜色混合。

alpha合成通过使用两个图像的alpha级别控制两个图像如何合并在一起。不执行颜色混合,只执行纯二进制选择(一个或另一个)。

颜色混合模式以各种方式混合源和目标的颜色。结果中的每个像素将是源像素和目标像素之间的某种组合。

下一页显示了可用模式的完整列表。(参见 syntax 第页了解更多详细信息。)为了帮助理解,将使用两个源和两个目标图像直观地显示每个模式的工作方式:

资料来源1

资料来源2

../../../../_images/map1.png
../../../../_images/map2.png

目的地1

目的地2

../../../../_images/bkg.png
../../../../_images/bkg2.png

阿尔法合成模式

复制

只有源才会出现在输出中。

例1

例2

../../../../_images/blend1-copy.png
../../../../_images/blend2-copy.png

目的地

输出中只存在目标

例1

例2

../../../../_images/blend1-destination.png
../../../../_images/blend2-destination.png

源覆盖

源是在目标上绘制的,在源是透明的情况下,目标是可见的。与…相反 destination-over .

例1

例2

../../../../_images/blend1-source-over.png
../../../../_images/blend2-source-over.png

目的地结束

源绘制在目标的下方,并且仅当目标是透明的时才可见。与…相反 source-over .

例1

例2

../../../../_images/blend1-destination-over.png
../../../../_images/blend2-destination-over.png

中的源

只有当目标的某些非透明像素重叠时,源才可见。这允许背景地图作为正在绘制的图层/特征的遮罩。与…相反 destination-in .

例1

例2

../../../../_images/blend1-source-in.png
../../../../_images/blend2-source-in.png

目的地

只有当源中的某些不透明像素重叠时,才会保留目标。这允许绘制层/特征作为背景地图的遮罩。与…相反 source-in .

例1

例2

../../../../_images/blend1-destination-in.png
../../../../_images/blend2-destination-in.png

源输出

源只保留在目标是透明的区域中。当与 source-in .

例1

例2

../../../../_images/blend1-source-out.png
../../../../_images/blend2-source-out.png

目的地输出

目标仅保留在源是透明的区域中。当与 destination-in .

例1

例2

../../../../_images/blend1-destination-out.png
../../../../_images/blend2-destination-out.png

源顶部

目标完全绘制,而源仅在与目标相交的位置绘制。

例1

例2

../../../../_images/blend1-source-atop.png
../../../../_images/blend2-source-atop.png

目的地顶部

源是完全绘制的,而目的地是在源上绘制的,并且只在它与源相交的地方绘制。

例1

例2

../../../../_images/blend1-destination-atop.png
../../../../_images/blend2-destination-atop.png

异或

“独占或”模式。只有当源或目标不为空,但不是同时为空时,才会渲染每个像素。

例1

例2

../../../../_images/blend1-xor.png
../../../../_images/blend2-xor.png

颜色混合模式

源颜色乘以目标颜色并替换目标。生成的颜色始终至少与源颜色或目标颜色一样暗。任何颜色与黑色相乘都会导致黑色。将任何颜色与白色相乘将保留原始颜色。

例1

例2

../../../../_images/blend1-multiply.png
../../../../_images/blend2-multiply.png

屏幕

将源颜色值和目标颜色值的互补值相乘,然后对结果进行互补。最终结果颜色始终至少与两种组分颜色中的任何一种一样轻。用白色屏蔽任何颜色都会产生白色;用黑色屏蔽使原始颜色保持不变。

这种效果类似于将多张照片幻灯片同时投影到一个屏幕上。

例1

例2

../../../../_images/blend1-screen.png
../../../../_images/blend2-screen.png

覆盖

根据目标颜色值将颜色相乘(屏幕)。源颜色覆盖目标,同时保留其高光和阴影。背景色不会被替换,而是与源颜色混合以反映背景的明暗度。

例1

例2

../../../../_images/blend1-overlay.png
../../../../_images/blend2-overlay.png

变暗

选择目标颜色和源颜色中较深的颜色。仅当源较暗时,才会将目标替换为源。

例1

例2

../../../../_images/blend1-darken.png
../../../../_images/blend2-darken.png

减轻

选择目标颜色和源颜色的浅色。仅当震源较轻时,才会用震源替换目的地。

例1

例2

../../../../_images/blend1-lighten.png
../../../../_images/blend2-lighten.png

彩色道奇

使目标颜色变亮以反映源颜色。用黑色绘制不会产生任何更改。

例1

例2

../../../../_images/blend1-color-dodge.png
../../../../_images/blend2-color-dodge.png

颜色烧伤

使目标颜色变暗以反映源颜色。用白色绘制不会产生变化。

例1

例2

../../../../_images/blend1-color-burn.png
../../../../_images/blend2-color-burn.png

强光

根据源颜色值倍增或筛选颜色。这种效果类似于对目的地发出刺眼的聚光灯。

例1

例2

../../../../_images/blend1-hard-light.png
../../../../_images/blend2-hard-light.png

柔光

根据源颜色值变暗或变亮颜色。这种效果类似于将漫射的聚光灯照射到目的地。

例1

例2

../../../../_images/blend1-soft-light.png
../../../../_images/blend2-soft-light.png

差异

从较浅的颜色中减去两种组分颜色中较深的颜色。白色反转目标颜色;黑色不产生变化。

例1

例2

../../../../_images/blend1-difference.png
../../../../_images/blend2-difference.png

排除

产生类似于 差异 但相比之下要低一些。白色反转目标颜色;黑色不产生变化。

例1

例2

../../../../_images/blend1-exclusion.png
../../../../_images/blend2-exclusion.png