From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/mask/index.html | 115 ++++++++++++++++++++++++++++++++++++ 1 file changed, 115 insertions(+) create mode 100644 files/zh-cn/web/css/mask/index.html (limited to 'files/zh-cn/web/css/mask/index.html') diff --git a/files/zh-cn/web/css/mask/index.html b/files/zh-cn/web/css/mask/index.html new file mode 100644 index 0000000000..47d5048e34 --- /dev/null +++ b/files/zh-cn/web/css/mask/index.html @@ -0,0 +1,115 @@ +--- +title: mask +slug: Web/CSS/mask +translation_of: Web/CSS/mask +--- +
{{CSSRef}}
+ +

CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

+ +
/* Keyword values */
+mask: none;
+
+/* Image values */
+mask: url(mask.png);                       /* 使用位图来做遮罩 */
+mask: url(masks.svg#star);                 /* 使用 SVG 图形中的形状来做遮罩 */
+
+/* Combined values */
+mask: url(masks.svg#star) luminance;       /* Element within SVG graphic used as luminance mask */
+mask: url(masks.svg#star) 40px 20px;       /* 使用 SVG 图形中的形状来做遮罩并设定它的位置：离上边缘40px，离左边缘20px */
+mask: url(masks.svg#star) 0 0/50px 50px;   /* 使用 SVG 图形中的形状来做遮罩并设定它的位置和大小：长宽都是50px */
+mask: url(masks.svg#star) repeat-x;        /* Element within SVG graphic used as horizontally repeated mask */
+mask: url(masks.svg#star) stroke-box;      /* Element within SVG graphic used as mask extending to the box enclosed by the stroke */
+mask: url(masks.svg#star) exclude;         /* Element within SVG graphic used as mask and combined with background using non-overlapping parts */
+
+/* Global values */
+mask: inherit;
+mask: initial;
+mask: unset;
+
+ +
+

mask的简写会将 {{cssxref("mask-border")}} 设为初始值。使用 mask 的简写优于使用其他简写或者各自属性的设置来覆盖。这能保证 mask-border 也会重新设置为新的效果样式。

+
+ +

{{cssinfo}}

+ +

Syntax

+ +

Values

+ +
+
<mask-reference>
+
设置遮罩图片的路径。详见 {{cssxref("mask-image")}}。
+
<masking-mode>
+
设置遮罩图片的模式。详见 {{cssxref("mask-mode")}}。
+
<position>
+
设置遮罩图片的位置。详见 {{cssxref("mask-position")}}。
+
<bg-size>
+
设置遮罩的大小。详见 {{cssxref("mask-size")}}。
+
<repeat-style>
+
设置遮罩图片的重复性。详见 {{cssxref("mask-repeat")}}。
+
<geometry-box>
+
如果只有一个 <geometry-box> 值被赋予，他将会设置 {{cssxref("mask-origin")}} 和 {{cssxref("mask-clip")}}。如果两个 <geometry-box> 值显示，第一个值代表 {{cssxref("mask-origin")}} 第二个值代表 {{cssxref("mask-clip")}}。
+
<geometry-box> | no-clip
+
设置区域，会被遮罩图片影响。详见 {{cssxref("mask-clip")}}。
+
<compositing-operator>
+
设置遮罩图层的组合操作。详见 {{cssxref("mask-composite")}}。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

例子

+ +
.target {
+  mask: url(#c1) luminance;
+}
+
+.anothertarget {
+  mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude;
+}
+
+ + + +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS Masks", "#the-mask", 'mask')}}{{Spec2("CSS Masks")}}Extends its usage to HTML elements.
+ Extends its syntax by making it a shorthand for the new mask-* properties defined in that specification.
{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}{{Spec2('SVG1.1')}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.mask")}}

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf