blob: 47d5048e342a8f5e3de460a054889077b40965ed (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
---
title: mask
slug: Web/CSS/mask
translation_of: Web/CSS/mask
---
<div>{{CSSRef}}</div>
<p><a href="/zh-CN/docs/Web/CSS">CSS</a> 属性 <strong><code>mask</code></strong> 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。</p>
<pre class="brush:css no-line-number">/* 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;
</pre>
<div class="note">
<p>mask的简写会将 {{cssxref("mask-border")}} 设为初始值。使用 <code>mask</code> 的简写优于使用其他简写或者各自属性的设置来覆盖。这能保证 <code>mask-border</code> 也会重新设置为新的效果样式。</p>
</div>
<p>{{cssinfo}}</p>
<h2 id="Syntax">Syntax</h2>
<h3 id="Values">Values</h3>
<dl>
<dt><code><mask-reference></code></dt>
<dd>设置遮罩图片的路径。详见 {{cssxref("mask-image")}}。</dd>
<dt><code><masking-mode></code></dt>
<dd>设置遮罩图片的模式。详见 {{cssxref("mask-mode")}}。</dd>
<dt><code><position></code></dt>
<dd>设置遮罩图片的位置。详见 {{cssxref("mask-position")}}。</dd>
<dt><code><bg-size></code></dt>
<dd>设置遮罩的大小。详见 {{cssxref("mask-size")}}。</dd>
<dt><code><repeat-style></code></dt>
<dd>设置遮罩图片的重复性。详见 {{cssxref("mask-repeat")}}。</dd>
<dt><code><geometry-box></code></dt>
<dd>如果只有一个 <geometry-box> 值被赋予，他将会设置 {{cssxref("mask-origin")}} 和 {{cssxref("mask-clip")}}。如果两个 <geometry-box> 值显示，第一个值代表 {{cssxref("mask-origin")}} 第二个值代表 {{cssxref("mask-clip")}}。</dd>
<dt><code><geometry-box> | no-clip</code></dt>
<dd>设置区域，会被遮罩图片影响。详见 {{cssxref("mask-clip")}}。</dd>
<dt><code><compositing-operator></code></dt>
<dd>设置遮罩图层的组合操作。详见 {{cssxref("mask-composite")}}。</dd>
</dl>
<h3 id="正式语法">正式语法</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="例子">例子</h2>
<pre class="brush: css">.target {
mask: url(#c1) luminance;
}
.anothertarget {
mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude;
}
</pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS Masks", "#the-mask", 'mask')}}</td>
<td>{{Spec2("CSS Masks")}}</td>
<td>Extends its usage to HTML elements.<br>
Extends its syntax by making it a shorthand for the new <code>mask-*</code> properties defined in that specification.</td>
</tr>
<tr>
<td>{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}</td>
<td>{{Spec2('SVG1.1')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
<p>{{Compat("css.properties.mask")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li>{{Cssxref("clip-path")}}, {{Cssxref("filter")}}</li>
<li><a href="https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/">CSS Shapes, clipping and masking – and how to use them</a></li>
<li><a href="/en-US/docs/Applying_SVG_effects_to_HTML_content">Applying SVG effects to HTML content</a></li>
<li><a href="/en-US/docs/SVG">SVG</a></li>
</ul>
|
