mask-position
Quick Summary for mask-position
mask-position CSS property sets the initial position, relative to the mask position layer set by mask-origin, for each defined mask image.
Code Usage for mask-position
<pre class="brush: css notranslate"><code><span class="token comment">/ Keyword values /</span> <span class="token property">mask-position</span><span class="token punctuation">:</span> top<span class="token punctuation">;</span> <span class="token property">mask-position</span><span class="token punctuation">:</span> bottom<span class="token punctuation">;</span> <span class="token property">mask-position</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">mask-position</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span> <span class="token property">mask-position</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token comment">/ <position> values /</span> <span class="token property">mask-position</span><span class="token punctuation">:</span> 25% 75%<span class="token punctuation">;</span> <span class="token property">mask-position</span><span class="token punctuation">:</span> 0px 0px<span class="token punctuation">;</span> <span class="token property">mask-position</span><span class="token punctuation">:</span> 10% 8em<span class="token punctuation">;</span> <span class="token comment">/ Multiple values /</span> <span class="token property">mask-position</span><span class="token punctuation">:</span> top right<span class="token punctuation">;</span> <span class="token property">mask-position</span><span class="token punctuation">:</span> 1rem 1rem<span class="token punctuation">,</span> center<span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">mask-position</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">mask-position</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">mask-position</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">mask-position</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>
More Details for mask-position
mask-position
The mask-position CSS property sets the initial position, relative to the mask position layer set by mask-origin, for each defined mask image.
/* Keyword values */ mask-position: top; mask-position: bottom; mask-position: left; mask-position: right; mask-position: center; /* <position> values */ mask-position: 25% 75%; mask-position: 0px 0px; mask-position: 10% 8em; /* Multiple values */ mask-position: top right; mask-position: 1rem 1rem, center; /* Global values */ mask-position: inherit; mask-position: initial; mask-position: revert; mask-position: unset; Syntax
One or more <position> values, separated by commas.
Values
<position> 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 definition
| 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) |
| 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. |
| Animation type | repeatable list of simple list of length, percentage, or calc |
Formal syntax
<position>#where
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where
<length-percentage> = <length> | <percentage>
Examples
Setting mask position
Change the mask-position value to any of the allowed values detailed above. If viewing the example in a Chromium-based browser change the value of -webkit-mask-position.
Specifications
| Specification |
|---|
| CSS Masking Module Level 1 # the-mask-position |
See also
Clipping and Masking in CSSLast modified: Aug 12, 2021, by MDN contributors
Select your preferred language English (US)EspañolFrançais日本語 Change languageAdd Comment
Other Items in CSS
Related Search Terms
Other Categories in CSS
