关于前端:webkitmaskcomposite

-webkit-mask-composite 是指在同时应用多个图片时，遮罩的混合形式。

它有以下值：

值	形容
source-over	源遮罩图像在指标遮罩图像上渲染
source-in	遮罩重叠的地位显示，不重叠的地位不显示
source-out	革除源遮罩图像和指标遮罩图像中的重叠像素；源遮罩图像的所有残余像素均被渲染
source-atop	仅指标遮罩失效（最初一个遮罩）
destination-over	指标遮罩图像在源遮罩图像上渲染
destination-in	遮罩重叠的地位显示，不重叠的地位不显示
destination-out	革除源遮罩图像和指标遮罩图像中的重叠像素；源遮罩图像的所有残余像素均被渲染
destination-atop	仅源遮罩失效（第一个遮罩）
xor	遮罩叠加处为通明，通明处与再与新的指标遮罩叠加为不通明，遵循乘法原理
clear	革除遮罩
copy	源遮罩图像替换指标遮罩
plus-lighter	相交的区域增亮，仅遮罩有透明度时失效

效果图如下：

查看线上成果

CSS-Doodle利用xor这个属性，发明很多万花筒一样的图案：
https://codepen.io/Chokcoco/p…

参考资料：
https://developer.mozilla.org…

评论