Manuales 
mask-position 1e535e
The mask-position property specifies the initial position (after any mask positioning area. 4r3a6v
The mask-position property works and takes the same values as the background-position property.
Official Syntax 3xs5l
- Syntax:
mask-position: <position>#
- Initial: center
- Applies To: All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements
- Animatable: as repeatable list of simple list of length, percentage, or calc
Notes 441w3q
The hash tag (#) indicates that the property takes any number of mask positions. The list of mask positions is comma-separated.
When the mask-position property takes a list of comma-separated values, each value is applied to a corresponding mask layer image specified in the mask-image property (first value for the first image, second value for the second image, and so on).
Values u704t
- <position>
-
Specifies the position of the mask inside the mask positioning area.
A <length> offset values.
These values describe the position of the element relative to its container’s edges (top edge and left edge).Please refer to the
<position>values.
Examples 2h2053
The following example sets the position of two mask layer images. The position is applied after each image is sized using the mask-size property.
img {
mask-image: url(first-mask.png), url(second-mask.png);
mask-position: top left, bottom right;
mask-size: 250px 250px, 300px, 200px;
}
Live Demo 6b4m17
The mask position in the following demo has been set to top left. Try changing the value of the mask-position property to see how the mask position changes, therefore changing the portion of the image that shows through it.
Browser 572e63
CSS Masks 5u23o
Method of displaying part of an element, using a selected image as a mask
W3C Candidate Recommendation
ed from the following versions:
Desktop ea5q
- No
- 53
- No
- No
- No
Mobile / Tablet 6s2f12
- No
- No
- No
- No
- 60
Notes 441w3q
This module, as you can see in the table above, hasn’t been fully implemented in all browsers, so you’re probably not going to be able to use all features even in browsers that have implemented certain properties (for the time being).
In the meantime, you can check out this open source feature table by Alan Greenblatt on GitHub. The purpose of this table is to provide some insight into what the current state of affairs is with various browser implementations of CSS Clipping and Masking features.