CSS mask-composite property
Description
CSS mask-composite property defines multiple composite operations to combine multi mask layers.
The first url layer is at the top i.e. close to the user. The last url is at the bottom of all the layers i.e. far away from the user.
In the demo, the circle is closer to the user than the square shape. Then the source layer is the circle while the square is the destination layer.
Syntax
mask-composite : add | subtract | intersect | exclude | clear | copy | destination-atop | destination-in | destination-out | destination-over | source-atop | source-in | source-out | source-over | xor
Property values
addDefault
-
The source layer is placed over the target layer.
mask-composite: add;
subtract
-
The destination mask layer will be subtracted from the source layer and then only the remaining source layer is visible.
mask-composite: subtract;
intersect
-
Only the intersected portion of both layers is visible.
mask-composite: intersect;
exclude
-
It is opposite to that of 'intersect' i.e. the portions of both layers that don't intersect are visible.
mask-composite: exclude;
clear
-
It does not enable any layer.
mask-composite: clear;
copy
-
Only the source layer is visible.
mask-composite: copy;
source-over
-
It places the source layer over the destination layer.
mask-composite: source-over;
destination-over
-
It places the destination layer over the source layer.
mask-composite: destination-over;
source-in
-
represents only the source area that overlaps the destination layer.
mask-composite: source-in;
destination-in
-
represents only the destination area that overlaps the source layer.
mask-composite: destination-in;
source-out
-
It represents the portion of source layer that falls outside the overlapping area.
mask-composite: source-out;
destination-out
-
It represents the portion of destination layer that falls outside the overlapping area.
mask-composite: destination-out;
source-atop
-
It represents both the overlapping area and destination area.
mask-composite: source-atop;
destination-atop
-
It represents both the overlapping area and source area.
mask-composite: source-atop;
xor
-
The non-overlapping regions of both the source and destination layers.
mask-composite: xor;
Applicable to
It applies to all elements
From web4college, the free CSS digger
Bookmark this page
Ctrl+D
