html标签mask,CSS mask-position属性用法及代码示例

mask-position属性使用百分比或关键字值在蒙版定位区域内设置蒙版图像。始终有两个值mask-position(水平偏移和垂直偏移)。如果仅指定一个值，则假定另一个为50％或居中。

用法:

mask-position:Keyword values

/* Or */

mask-position:position values

/* Or */

mask-position:Multiple values

/* Or */

mask-position:Global values

属性值：此属性接受上面提到并在下面描述的值：

Keyword values:此属性值是指使用诸如上，下，左，右，中心等单位定义的值。

Position values:此属性值是指以x％y％之类的单位定义的值，其中x和y是一些整数。

多个值：此属性值是指用右上角，2rem，2rem，中心等单位定义的值。

Global values:此属性值是指使用诸如继承，初始，未设置等单位定义的值。

范例1：下面的示例使用position-values说明mask-position属性

.Container{

border:3px solid black;

background-color:rgb(136, 255, 0);

width:30%;

height:30vh;

}

.geeks{

width:30%;

height:200px;

background:green;

border:10px solid red;

-webkit-mask-image:

url("image.svg");

-webkit-mask-repeat:no-repeat;

mask-position:0.2rem 30%;

}

输出：

范例2：下面的示例使用keyword-values说明mask-position属性

.Container{

border:3px solid black;

background-color:rgb(136, 255, 0);

width:30%;

height:30vh;

}

.geeks{

width:30%;

height:200px;

background:green;

border:10px solid red;

-webkit-mask-image:

url("image.svg");

-webkit-mask-repeat:no-repeat;

mask-position:top;

}

输出：

支持的浏览器：

chrome 合金。

苹果浏览器。

边。

火狐浏览器。

Opera 。

Internet Explorer(不支持)。