CSS mask-position 属性
示例
将蒙版图层图像的位置设置为居中
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
mask-size: 50%;
mask-repeat: no-repeat;
mask-position: center;
}
亲自试一试 »
更多“亲自试一试”示例在下方。
定义和用法
mask-position 属性设置蒙版图像的起始位置（相对于蒙版位置区域）。
提示：默认情况下，蒙版图像放置在元素的左上角，并在垂直和水平方向上重复。
| 默认值 | 0% 0% |
|---|---|
| 继承 | 否 |
| 可动画 | 否。 了解有关可动画的信息 |
| 版本 | CSS 蒙版模块级别 1 |
| JavaScript 语法 | object.style.maskPosition="100px center" |
浏览器支持
表中的数字指定完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| mask-position | 120 | 120 | 53 | 15.4 | 106 |
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的信息 |
更多示例
示例
将蒙版图层图像的位置设置为右下角
.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 属性
CSS 参考： mask-clip 属性
CSS 参考： mask-composite 属性
CSS 参考： mask-image 属性
CSS 参考： mask-mode 属性
CSS 参考： mask-origin 属性
CSS 参考： mask-repeat 属性
CSS 参考： mask-size 属性
CSS 教程： CSS 蒙版
