This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

mask-composite

Summary

This property allows to composite multiple mask layers define by mask-image with different Porter-Duff compositing modes. As of time of writing, this property is not yet implemented in most browsers.

Overview table

Initial value
add
Applies to
All elements. In SVG, it applies to container elements without the <defs> element and all graphics elements.
Inherited
No
Media
visual
Computed value
As specified
Animatable
no

CSS Object Model Property
:

Syntax

  • mask-composite: add
  • mask-composite: exclude
  • mask-composite: intersect
  • mask-composite: subtract

Values

add
The mask image layer closer to the user is placed above the next mask image layer.
subtract
The mask image layer closer to the user is placed where it falls outside of the next mask image layer.
intersect
The parts of the mask image layer closer to the user that overlap the next mask image layer replace the parts of the next mask image layer.
exclude
The non-overlaping parts of the mask image layer closer to the user and the next mask image layer are combined.

Examples

/* The two mask layers are composited with the operation 'exclude' */
mask-image: url(source.png), url(destination.png);
mask-composite: exclude;
/* destination.png and background.png are combined
with the compositing operator subtract.
The result of this operation and source.png are combined
with the compositing operator exclude. */
mask-image: url(source.png), url(destination.png), url(background.png);
mask-composite: exclude, subtract;
/* Just one mask layer is specified. No compositing operation will happen. */
mask-image: url(source.png);
mask-composite: exclude;

Usage

 Safari, Chrome and Opera implement this property '-webkit-' prefixed with different keywords. The keywords can be mapped as follows:

add → source-over, subtract → source-out, intersect → source-in, exclude → xor

Related specifications

CSS Masking Level 1
W3C Last Call Working Draft
CSS Masking Level 1
W3C Editor’s Draft