mask

< css‎ | properties
Jump to: navigation, search

mask

This article is Not Ready.


W3C Last Call Working Draft

Summary

This property is shorthand for setting mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-composite and mask-size. Omitted values are set to their original properties' initial values.

Overview table

Initial value See individual properties.
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 See individual properties.
Animatable No
CSS Object Model Property
Percentages See individual properties.

Syntax

  • mask: <mask-layer>


Values

<mask-layer>
Where

<mask-layer> = <mask-reference> <masking-mode>? </div>

Compatibility

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support (for SVG)
?
Yes
?
Partial support (almost)
?
Unknown
?
Yes
?
Yes
Applies to HTML Elements
?
none
?
Unknown
?
none
?
none
?
none

Mobile

FeaturesAndroidFirefox MobileIE PhoneOpera MobileSafari Mobile
Basic support
?
Unknown
?
Unknown
?
Unknown
?
Unknown
?
Unknown


Examples

The url points to a <mask> element that is used as mask.

CSS

/* mask-reference via a url */
img {
  mask: url(#masking);
}

CSS

/* Two mask layers (both references to mask images) that are combined with the 'add' compositing mode. */
img {
  mask: url(mask-image1.png) add, url(mask-image2.png);
}



Related specifications

Specification Status Related Changes
CSS Masking Level 1 W3C Last Call Working Draft
CSS Masking Level 1 W3C Editor's Draft

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?