>屏蔽是一种使您可以在隐藏其余部分时在屏幕上显示元素的选定部分或图像的技术。 Web开发人员可以通过Mask属性和SVG蒙版元素在浏览器中使用此技术。这些功能允许您在浏览器中显示对图像和其他元素的效果，而无需使用任何形式的图像编辑软件。
>在本文中，我将向CSS和SVG屏蔽功能展示，还确保包括有关当前浏览器支持问题的一些信息。钥匙要点
CSS和SVG中的
>蒙版是CSS速记属性，用于整个单个属性。 让我们更详细地仔细研究其中的一些。
>
>蒙版图像属性>您可以使用蒙版图像属性设置元素的掩码层图像。
值无与设置没有值的值不同。相反，它仍然算作透明的黑色图像层。
>您可以将掩码图像设置为URL值。这可以是通往PNG图像文件，SVG文件或对SVG
以下是一些示例：
/* masking with two comma-separated values */
.masked-element {
mask-image: url(mask.png), none;
}
/* using external svg graphic as mask */
.masked-element {
mask-image: url(mask.svg);
}
这是您如何引用svg
.masked-element {
mask-image: url(#mask1);
}
梯度图像也是掩码图像属性的合适值：
.masked-element {
mask-image: linear-gradient(black 0%, transparent 100%);
}
一个方便的alpha通道示例是一个带有黑色和透明区域的PNG图像。蒙版元素将通过蒙版图像的黑色部分显示，其alpha值为一个。透明部分下方的其他所有内容都将隐藏为零。
我将使用此png图像作为我的alpha面具：>并在下面的JPG图像上执行掩蔽操作：
>
这是魔术发生的地方：>
>这就是浏览器中结果的样子：
.masked-element {
mask-image: url(alpha-mask.png);
mask-mode: alpha;
}
您要掩盖的元素的区域（由面具的白色像素覆盖）将介绍。面具的透明像素所覆盖的蒙版元素的部分将被隐藏。
>将蒙版模式属性设置为亮度，并将上图作为我的掩码，将显示与以前相同的结果。>
这是代码：
>“ mask-repeat属性”
> mask-repeat的工作非常类似于背景重复属性。它设置了它们的大小和位置后，它会控制蒙版层图像的平铺。
可能的值为：
导致以下掩蔽效果：
>“蒙版位置属性”
/* masking with two comma-separated values */
.masked-element {
mask-image: url(mask.png), none;
}
/* using external svg graphic as mask */
.masked-element {
mask-image: url(mask.svg);
}
>您可以使用蒙版位置属性定位蒙版层图像。您可以将此属性设置为与更熟悉的CSS背景图像属性相同的值。它的初始值是中心。
例如，如果要将蒙版映像层放在视口的左上角，请将蒙版位置属性设置为
> 0 0 0 这是浏览器中上面的代码的样子：
>将上面的蒙版位置属性的值更改为> 100％100％，在视口右下方显示蒙版层图像：
.masked-element {
mask-image: url(#mask1);
}
>您可以使用Mask-size属性快速设置蒙版层图像的大小，该属性接受与更熟悉的CSS背景大小属性相同的值。
>
例如，将蒙版大小设置为50％，以其完整宽度的50％显示掩码层图像：>设置蒙版大小以包含，将掩盖层图像缩放到最大尺寸，以使其宽度和高度都可以安装在掩模定位区域内：
>
>请参阅codepen上的sitepoint（@sitepoint）的笔CSS蒙版示例。
组合蒙版层如上所述，您可以通过将蒙版图像属性的每个值与逗号分开，可以在同一元素上使用多个掩码层。这些图层被堆叠在另一层上，最后一层首先显示在屏幕上。
例如：
：
/* masking with two comma-separated values */
.masked-element {
mask-image: url(mask.png), none;
}
/* using external svg graphic as mask */
.masked-element {
mask-image: url(mask.svg);
}
bask2.png在> mask1.png 的顶部分层。
>“蒙版复合属性”使您可以根据以下关键字的值组合不同的掩码层：add：
>您可以使用Mask进行控制CSS掩盖操作的所有属性。
这是完整的面具速记：
>尽管您可以在蒙版速记中重新排序属性，但您需要在蒙版属性之后设置蒙版属性，并由“/”符号隔开。此外，设置掩码大小而不设置蒙版位置将导致无效声明。
>>最后，由于您无法在掩码属性上指定的任何值都设置回其初始默认值，因此当您需要重置任何单个属性时，使用掩码非常方便。
svg掩码元素.masked-element {
mask-image: url(#mask1);
}
可扩展的向量图形或简称SVG是一种基于XML的语言，用于标记图形。
您可以在SVG文档中使用> SVG可以做的另外一件很酷的事情是使用文本掩盖页面上的其他元素。
>让我们仔细观察这些可能性。
在编写时，使用内联SVG图形内的
与以下CSS：
/* masking with two comma-separated values */
.masked-element {
mask-image: url(mask.png), none;
}
/* using external svg graphic as mask */
.masked-element {
mask-image: url(mask.svg);
}
>在上面的代码中，我包含了一个
>最后，我在CSS蒙版属性中引用了SVG
>仅通过为页面背景和蒙版图像添加其他一些样式声明，您就可以实现出非常戏剧性的效果，如下面的效果：
请注意，圆面膜的部分如何填充梯度的白色阴影，使蒙版的图像通过。相反，该部分充满了梯度的黑色色调，隐藏了掩盖的图像。
这是在codepen上进行的实时演示（请记住，它只能在firefox上使用！）。
>请参阅codepen上的sitepoint（@sitepoint）的inline svg掩码元素的笔蒙版。
在SVG图形上使用SVG
>在下面的摘要中，我将要将图像放置在SVG元素中，然后将CSS蒙版属性应用于它。 CSS蒙版属性引用了带有
这是负责CSS中掩盖操作的片段：
.masked-element {
mask-image: url(#mask1);
}
看Codepen演示：
.masked-element {
mask-image: linear-gradient(black 0%, transparent 100%);
}
掩盖
>您可以使用SVG蒙版内的文本元素执行掩蔽操作：
上面的摘要在SVG蒙版内添加了一个黑色SVG文本元素，并使用CSS蒙版属性将其应用于浅蓝色的SVG椭圆形。 椭圆形形状后面的任何内容（在这种情况下，它是身体的背景图像）将通过文本显示。结果看起来像这样：
完整的代码可在Codepen上使用：
>请参阅codepen上的sitepoint（@sitepoint）的笔svg文本蒙版。
>您可以使用CSS Transition和KeyFrame Animation动画掩码位置和掩模大小。
下面是星形PNG掩码图像的基本关键帧动画示例。
这是相关的代码段：
tag：>遮罩操作使用速记蒙版属性：
/* masking with two comma-separated values */
.masked-element {
mask-image: url(mask.png), none;
}
/* using external svg graphic as mask */
.masked-element {
mask-image: url(mask.svg);
}
元素上的.Animate类，使用CSS变换和动画为星形图像添加了运动：
.masked-element {
mask-image: url(#mask1);
}
>启动像Chrome这样的WebKit浏览器，并在Codepen上查看以下实时演示：
.masked-element {
mask-image: linear-gradient(black 0%, transparent 100%);
}
请参阅Codepen上的Maria Antonietta Perna（@antonietta）的CSS面具动画的笔
>用CSS
对SVG掩码元素进行动画动画>您可以使用SVG 标签上添加掩码效果，然后使用CSS进行动画。
好消息是，如果您将SVG掩码应用于Inline SVG图形，浏览器支持立即Sky-Rockets。仅使用SVG查看相同的动画演示：
>请参阅sitepoint（@sitepoint）在codepen上的svg元素上的pen动画svg蒙版。
>浏览器对蒙版属性的支持
>在本文中，我介绍了浏览器支持问题。写作时情况的简单崩溃，看起来像这样：
在HTML元素上使用CSS Mask属性在WebKit浏览器上使用-Webkit- vendor前缀。 HTML元素上仅支持Firefox上的HTML元素上的Inline SVG掩码元素。
Yoksel的这款出色的Codepen演示就浏览器的支持而言提供了最先进的视觉插图。
>我可以使用网站上的浏览器支持兼容性表提供了更多详细信息和链接到更多资源。
>尽管当前对CSS蒙版的浏览器支持并不是很好，但是如果您将此功能用作一些装饰元素的增强功能，但不支持浏览器的用户甚至不会注意到它们会错过。
>>最后，使用SVG
>在CSS和SVG掩蔽上的常见问题（FAQ）
>
>如何使用SVG？为您的网络元素添加独特的视觉效果。要创建带有SVG的梯度蒙版，您需要定义蒙版元素内的线性级别或径向级别元素。梯度元素应至少具有两个停止元素，该元素沿梯度沿不同点的颜色和不透明度定义。
是的，您可以使用CSS并共同掩盖以创建复杂的掩蔽效果。您可以将CSS掩码应用于元素，然后将SVG掩码应用于同一元素。该元素的最终可见性是由两个掩码的组合确定的。
CSS掩码在Internet Explorer中不支持。如果您需要支持Internet Explorer，则应改用SVG掩码。在所有主要浏览器中都支持SVG屏蔽，包括Internet Explorer。对于CSS掩盖，您可以使用CSS动画或过渡来对掩码图像属性进行动画动画。对于SVG屏蔽，您可以使用SVG动画来对蒙版元素进行动画。
>如何使用CSS或SVG？
>我可以将视频用作带有CSS或svg的掩码或SVG？
css masking basking支持视频蒙版。您可以通过将蒙版图像属性设置为视频URL来使用视频作为掩模图像。 SVG掩蔽不支持视频掩码。
以上是用CSS和SVG在浏览器中掩盖的详细内容。更多信息请关注PHP中文网其他相关文章！
