Proprietà mask-position CSS

Pagina precedente mask-origin
Pagina successiva mask-repeat

Course Recommendation:

Definition and Usage mask-position

The attribute 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 vertically and horizontally.

Instance

Example 1

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%;
  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:
  .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%. 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 Production:	Not supported. See:Animation-related properties.
Version:	CSS Masking Module Level 1
JavaScript Syntax:	object.style.maskPosition="100px center"