css: 理解mix-blend-mode:difference

130 阅读1分钟

mix-blend-mode:difference

混合模式中的差值模式,会检查每个颜色通道,将底色和绘图色进行比较,用较亮的色值减去较暗的色值,得到最终的混合色。

举个例子:底色是#0F0,绘图色是#F00,那么差值混合之后,最终是展示为#FF0, 即R通道是F-0=F, G通道是F-0=F,B通道是0-0=0。

想实现在白底上展示黑字,在黑底上展示白字,用差值模式就能很好做到.

底色白色#FFF,绘图色白色#FFF,相减即得#000;

底色黑色#000,绘图色白色#FFF,差值即得#FFF.