-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:
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…