Manuales 
mask-position 6v4h2
The mask-position property specifies the initial position (after any mask positioning area. 1x1y4b
The mask-position property works and takes the same values as the background-position property.
Official Syntax 55184y
- 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 z5jo
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 584j31
- <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 3e5p5z
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 2x4j2k
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 k5t66
CSS Masks 1o5wz
Method of displaying part of an element, using a selected image as a mask
W3C Candidate Recommendation
ed from the following versions:
Desktop 3n671n
- No
- 53
- No
- No
- No
Mobile / Tablet 4q224p
- No
- No
- No
- No
- 60
Notes z5jo
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.