The mask
CSS shorthand property hides an element (partially or fully) by masking or clipping the image at specific points.
Note: As well as the properties listed below, the mask
shorthand also resets mask-border
to its initial value. It is therefore recommended to use the mask
shorthand rather than other shorthands or the individual properties to override any mask settings earlier in the cascade. This will ensure that mask-border
has also been reset to allow the new styles to take effect.
This property is a shorthand for the following CSS properties:
mask: none;
mask: url(mask.png);
mask: url(masks.svg#star);
mask: url(masks.svg#star) luminance;
mask: url(masks.svg#star) 40px 20px;
mask: url(masks.svg#star) 0 0/50px 50px;
mask: url(masks.svg#star) repeat-x;
mask: url(masks.svg#star) stroke-box;
mask: url(masks.svg#star) exclude;
mask: inherit;
mask: initial;
mask: revert;
mask: revert-layer;
mask: unset;
mask:
url(masks.svg#star) left / 16px repeat-y,
url(masks.svg#circle) right / 16px repeat-y;
Initial value | as each of the properties of the shorthand:
|
---|
Applies to | all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements |
---|
Inherited | no |
---|
Percentages | as each of the properties of the shorthand:
|
---|
Computed value | as each of the properties of the shorthand:
mask-image : as specified, but with url() values made absolutemask-mode : as specifiedmask-repeat : Consists of two keywords, one per dimensionmask-position : Consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.mask-clip : as specifiedmask-origin : as specifiedmask-size : as specified, but with relative lengths converted into absolute lengthsmask-composite : as specified
|
---|
Animation type | as each of the properties of the shorthand:
|
---|
Creates stacking context | yes |
---|
mask =
<mask-layer>#
<mask-layer> =
<mask-reference> ||
<position> [ / <bg-size> ]? ||
<repeat-style> ||
<geometry-box> ||
[ <geometry-box> | no-clip ] ||
<compositing-operator> ||
<masking-mode>
<mask-reference> =
none |
<image> |
<mask-source>
<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
<bg-size> =
[ <length-percentage [0,∞]> | auto ]{1,2} |
cover |
contain
<repeat-style> =
repeat-x |
repeat-y |
[ repeat | space | round | no-repeat ]{1,2}
<geometry-box> =
<shape-box> |
fill-box |
stroke-box |
view-box
<compositing-operator> =
add |
subtract |
intersect |
exclude
<masking-mode> =
alpha |
luminance |
match-source
<image> =
<url> |
<gradient>
<mask-source> =
<url>
<length-percentage> =
<length> |
<percentage>
<shape-box> =
<visual-box> |
margin-box
<url> =
<url()> |
<src()>
<visual-box> =
content-box |
padding-box |
border-box
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
.target {
mask: url(#c1) luminance;
}
.anothertarget {
mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude;
}
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.