-webkit-mask

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Summary

The -webkit-mask property is a shorthand property for setting individual mask property values in a single place in the style sheet. -webkit-mask can be used to set the values for one or more of: -webkit-mask-image, -webkit-mask-repeat, -webkit-mask-attachment, -webkit-mask-position, -webkit-mask-origin, and -webkit-mask-clip.

Syntax

-webkit-mask: <mask-image> [<mask-repeat> || <mask-attachment> || <mask-position> || <mask-origin> || <mask-clip>]*

Values

mask-image
Required. See -webkit-mask-image.
mask-repeat
Optional. See -webkit-mask-repeat.
mask-attachment
Optional. See -webkit-mask-attachment.
mask-position
Optional. See -webkit-mask-position.
mask-origin
Optional. See -webkit-mask-origin.
mask-clip
Optional. See -webkit-mask-clip.

Examples

.example {
    -webkit-mask: url('mask.png') no-repeat fixed 20px 20px padding padding;
} 

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 Not supported Not supported Not supported 4.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 Not supported Not supported Not supported 3.2

See also

Document Tags and Contributors

Tags: 
Contributors to this page: velvel53, Sheppy, ethertank, teoli, Supuhstar, berkerpeksag, barlow, grendel
Last updated by: velvel53,
Hide Sidebar