CSS propiedades mask-position

Página anterior mask-origin
Página siguiente mask-repeat

Definition and Usage

mask-position The property sets the starting position of the mask image (relative to the mask position area).

Tip:By default, the mask image is placed at the top left corner of the element and repeated in both vertical and horizontal directions.

Example

Example 1

Set the position of the mask layer image to the center:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
  mask-position: center;
}

Try it yourself

Example 2

Set the position of the mask layer image to the bottom right:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
  mask-position: 100% 100%;
}

Try it yourself

CSS Syntax

mask-position: value;

Attribute value

Value	Description
left top left center left bottom right top right center right bottom center top center center center bottom	If only one keyword is specified, the other value will be "center".
x% y%	The first value is the horizontal position, and the second value is the vertical position. The top left corner is 0% 0%. The bottom right corner is 100% 100%. If only one value is specified, the other value will be 50%. The default value is: 0% 0%.
xpos ypos	The first value is the horizontal position, and the second value is the vertical position. The top left corner is 0 0. The unit can be pixels (0px 0px) or any other CSS unit. If only one value is specified, the other value will be 50%. Mix % and position can be used.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Technical details

Default value:	0% 0%
Inheritance:	No
Animation creation:	Not supported. See:Animation-related properties.
Version:	CSS Masking Module Level 1
JavaScript Syntax:	object.style.maskPosition="100px center"