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 valuecenter
Applies toall elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Inheritedno
Percentagesrefer to size of mask painting area minus size of mask layer image (see the text for background-position)
Mediavisual
Computed valueConsists 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.
Animatableyes, 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 orderthe 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