码农教程 - 一技在手,衣食无忧! tools

目录

CSS mask-position 属性

❮上一节 完整的CSS参考 下一节❯

示例

将遮罩层图片的位置设置为中心：

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

下面有更多 "亲自试一试" 示例。

定义和用法

这个mask-position属性设置蒙版图片的起始位置（相对于蒙版位置区域）。

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

默认值： 0% 0%
遗传： 不
可动画： 不。阅读可动画的
版本： CSS3
JavaScript 语法： 对象.style.maskPosition="100px center"

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

-webkit- 后面的数字指定使用前缀的第一个版本。

Property
mask-position 4.0 -webkit- 79.0 -webkit- 53.0 4.0 -webkit- 15.0 -webkit-

CSS 语法

mask-position: value;

属性值

Value Description
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom		 If you only specify one keyword, the other value will be "center"
x% y% The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0%
xpos ypos The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

示例

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

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

相关页面

CSS 参考：掩模图片属性

CSS 参考：掩码模式属性

CSS 参考：掩码起源属性

CSS 参考：掩码重复属性

CSS 参考：掩模尺寸属性

CSS教程：CSS 屏蔽


❮上一节 完整的CSS参考 下一节❯