-webkit-mask-composite

Time:2022-1-21

-webkit-mask-compositeRefers to the simultaneous use ofMultipleThe blending mode of the mask when the picture is.

It has the following values:

value describe
source-over The source mask image is rendered on the target mask image
source-in The position where the mask overlaps is displayed, and the position where it does not overlap is not displayed
source-out Clearing the overlapping pixels in the source mask image and the target mask image; All remaining pixels of the source mask image are rendered
source-atop Only target mask takes effect (last mask)
destination-over The target mask image is rendered on the source mask image
destination-in The position where the mask overlaps is displayed, and the position where it does not overlap is not displayed
destination-out Clearing the overlapping pixels in the source mask image and the target mask image; All remaining pixels of the source mask image are rendered
destination-atop Only the source mask takes effect (first mask)
xor The mask overlay is transparent, and the transparent overlay and the new target mask are opaque, following the multiplication principle
clear Clear mask
copy Replace target mask with source mask image
plus-lighter The intersecting areas are lightened, which takes effect only when the mask has transparency


The renderings are as follows:

-webkit-mask-composite

View online effects

CSS-Doodle

CSS doodle utilizationxorThis attribute creates many kaleidoscope like patterns:
https://codepen.io/Chokcoco/p…


reference material:
https://developer.mozilla.org…