CSS mask-position 属性

定义和用法

mask-position 属性设置遮罩图像的起始位置（相对于遮罩位置区域）。

提示：默认情况下，遮罩图像放置在元素的左上角，并在垂直和水平方向上重复。

实例

例子 1

将遮罩层图像的位置设置为居中：

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

亲自试一试

例子 2

将遮罩层图像的位置设置为右下角：

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

亲自试一试

CSS 语法

mask-position: value;

属性值

值 描述
  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom
 如果只指定一个关键字，另一个值将为 "center"。
x% y%

第一个值是水平位置，第二个值是垂直位置。

左上角是 0% 0%。右下角是 100% 100%。

如果只指定一个值，另一个值将为 50%。

默认值为：0% 0%
xpos ypos

第一个值是水平位置，第二个值是垂直位置。

左上角是 0 0。单位可以是像素（0px 0px）或任何其他 CSS 单位。

如果只指定一个值，另一个值将为 50%。

可以混合使用 % 和位置。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

技术细节

默认值： 0% 0%
继承性： 否
动画制作： 不支持。请参阅：动画相关属性。
版本： CSS Masking Module Level 1
JavaScript 语法： object.style.maskPosition="100px center"

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
120 120 53 15.4 106

相关页面

教程：CSS 遮罩

参考：CSS mask 属性

参考：CSS mask-clip 属性

参考：CSS mask-composite 属性

参考：CSS mask-image 属性

参考：CSS mask-mode 属性

参考：CSS mask-origin 属性

参考：CSS mask-repeat 属性

参考：CSS mask-size 属性

参考：CSS mask-type 属性