CSS - mask-position
The mask-position CSS property sets the initial position, relative to the mask position layer defined by mask-origin for each defined mask image.
Example
.exampleOne {
mask-image: url(mask.png);
mask-position: bottom right;
}
.exampleTwo {
mask-image: url(mask.png);
mask-position: 25%;
}
Syntax
/* Keyword values */ mask-position: top; mask-position: bottom; mask-position: left; mask-position: right; mask-position: center; /* values */ mask-position: 25% 75%; /* values */ mask-position: 0px 0px; mask-position: 1cm 2cm; mask-position: 10ch 8em; /* Multiple values */ mask-position: 0px 0px, center; /* Global values */ mask-position: inherit; mask-position: initial; mask-position: unset;
Values
<position>- Is a
<position>, that is one to four values representing a 2D position regarding the edges of the element's box. Relative or absolute offsets can be given. Note that the position can be set outside of the element's box.
Formal syntax
<position>#where
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]where
<length-percentage> = <length> | <percentage>
Description
The mask-position CSS property sets the initial position, relative to the mask position layer defined by mask-origin for each defined mask image.
| Initial value | center |
|---|---|
| Applies to | all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements |
| Inherited | no |
| Percentages | refer to size of mask painting area minus size of mask layer image (see the text for background-position) |
| Media | visual |
| Computed value | 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. |
| Animatable | yes, as a repeatable list of , a simple list of , a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers. |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser Compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 1.0-webkit | No support[2] | ? | ? | 4.0-webkit |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | No support[1] | ? | ? | ? |
[1] Gecko currently doesn't implement this feature. See bug 1251161.
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Masking Level 1 The definition of 'mask-position' in that specification. |
Candidate Recommendation | Initial definition |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/mask-position