CSS mask-position property

Previous Page mask-origin
Next Page mask-repeat

Course Recommendation:

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.

Instance

Example 1

Set the position of the mask layer image to the bottom-right corner:
  .mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  Set the position of the mask layer image to the center:
mask-position: 100% 100%;

}

mask-position: center;

Example 2

Set the position of the mask layer image to the bottom-right corner:
  .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".y xy	The first value is the horizontal position, and the second value is the vertical position. % If only one value is specified, the other value will be 50%. The default value is: 0% 0%. The bottom-right corner is 100% 100%.
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%. Percentages and positions can be mixed.
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"