我们介绍了如何使用clip-path属性通过css进行剪裁，因此我们现在自然要介绍掩码。与剪裁相反，在剪裁中，图像或元素的一部分要么完全不可见，要么完全可见，使用蒙版可以隐藏或显示具有不同不透明度级别的图像部分。
使用MASK-IMAGE属性可以在CSS中进行遮罩，并且必须提供一个图像作为遮罩。图像蒙版中100%为黑色的内容将完全可见，100%透明的内容将被完全隐藏，而介于两者之间的任何内容都将部分遮盖图像。Css中的Linear和radial渐变是生成的图像，因此它们可以用作图像蒙版。使用遮罩元素的SVG也可以用作图像遮罩。让我们通过具体的例子来介绍图像蒙版的三种可能性：
使用渐变进行遮罩
让我们首先使用一个简单的线性渐变，从透明到黑色。第一个图像是我们的默认开始图像，第二个图像应用了线性渐变作为遮罩图像值：
下面是这里使用的CSS规则：
1.mask1 {
2 -webkit-mask-image: linear-gradient(to bottom, transparent 25%, black 75%);
3 mask-image: linear-gradient(to bottom, transparent 25%, black 75%);
4}
下面是另外两个可以通过使用渐变遮罩实现的有趣效果的示例：
以及这两个渐变蒙版的CSS规则：
1.mask2 {
2 -webkit-mask-image: radial-gradient(circle at 50% 60%, black 50%, rgba(0, 0, 0, 0.6) 50%);
3 mask-image: radial-gradient(circle at 50% 60%, black 50%, rgba(0, 0, 0, 0.6) 50%);
4}
5.mask3 {
6 -webkit-mask-image: radial-gradient(ellipse 90% 80% at 48% 78%, black 40%, transparent 50%);
7 mask-image: radial-gradient(ellipse 90% 80% at 48% 78%, black 40%, transparent 50%);
8}
使用镜像进行屏蔽
这里我们使用了一个使用Sketch创建的图像作为我们的图像蒙版。第一个图像是图像蒙版本身，第二个图像应用了该蒙版：
我们的css如下所示：
1.mask4 {
2 -webkit-mask-image: url("/path/to/image-mask.png");
3 mask-image: url("/path/to/image-mask.png");
4 -webkit-mask-size: 400px 600px;
5 mask-size: 400px 600px;
6}
我们在这里指定了遮罩大小的值，因为我们的图像遮罩是800px x** 1200px** ，但在这里我们希望所有东西都缩小一半，以便图像在视网膜上看起来很清晰。
使用SVG屏蔽
最后，如果您喜欢使用SVG，则可以使用SVG掩码元素定义图像掩码。
第一个例子目前似乎只能在Firefox中运行(你可能在不支持的浏览器中看不到任何东西 )。它定义了SVG掩码，然后我们像往常一样在CSS中引用该掩码的ID。第二个示例似乎得到了更广泛的支持，并将图像定义为SVG元素本身的一部分。
<$>[注意]还请注意，对于SVG蒙版，要使用的颜色是白色和黑色，而不是透明和黑色。颜色也是相反的，白色/部分白色是可见的。<$>
[鳄鱼mdPBExv 540]
示例1(三角形)
下面是第一个示例的SVG标记：
1<svg width="0" height="0" viewBox="0 0 400 600">
2 <defs>
3 <mask id="my-svg-mask">
4 <rect fill="#000000" x="0" y="0" width="400" height="600"></rect>
5 <polygon fill="#FFFFFF" points="200.5 152 349 449 52 449"></polygon>
6 </mask>
7 </defs>
8</svg>
然后，我们可以像往常一样，通过引用SVG掩码的ID，将该掩码应用于带有掩码的图像：
1.mask5 {
2 -webkit-mask-image: url(#my-svg-mask);
3 mask-image: url(#my-svg-mask);
4}
示例2（气泡)
对于我们的第二个SVG示例，所有内容都包含在SVG定义中，包括我们的主图像本身：
1<svg width="400px" height="600px" viewBox="0 0 400 600">
2 <defs>
3 <mask id="my-svg-mask2">
4 <rect id="Rectangle" fill="#000000" x="0" y="0" width="400" height="600"></rect>
5 <circle id="Oval" fill="#FFFFFF" cx="67.5" cy="51.5" r="67.5"></circle>
6 <circle id="Oval" fill="#FFFFFF" cx="296.597656" cy="118.597656" r="56.5976562"></circle>
7 <circle id="Oval" fill="#FFFFFF" cx="53.4648437" cy="256.464844" r="81.4648437"></circle>
8 <circle id="Oval" fill="#FFFFFF" cx="239.587891" cy="313.587891" r="70.5878906"></circle>
9 <circle id="Oval" fill="#FFFFFF" cx="366.597656" cy="562.597656" r="56.5976562"></circle>
10 <circle id="Oval" fill="#FFFFFF" cx="93.203125" cy="486.203125" r="76.203125"></circle>
11 </mask>
12 </defs>
13 <image mask="url(#my-svg-mask2)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/images/css/masking/masking-example1.jpg" width="400" height="600"></image>
14</svg>