mask-position
Quick Summary for 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.
Code Usage for mask-position
/* 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; 
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 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)
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.
Animation typerepeatable 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 CSS

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)EspañolFrançais日本語 Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
In this case my anchor this week becomes driving almost 2hrs outside of Atlanta to one of my favorite hard core gyms in the world.. MetroFlex aka The Dungeon. The gym owners turn the heat way up so it becomes a fun sweat box and the gym members just watch from afar and leave me alone. I happily drive myself long distances to find MY ANCHOR. Our anchor allows us to have balance, focus and be as productive as possible. And if you're in the middle of a heavy set and your headphones start to fall off your head, like mine did here.. well.. f*ck the headphones. Let em break and fall. You can always get a new pair, but the iron ain't ever gonna lift itself.
Unknown
Random CSS Property

tab-size

The tab-size CSS property is used to customize the width of tab characters (U+0009).
tab-size css reference