用CSS和SVG在浏览器中掩盖-css教程-PHP中文网

首页

web前端

css教程

用CSS和SVG在浏览器中掩盖

Christopher Nolan

Feb 21, 2025 am 09:09 AM

用CSS和SVG在浏览器中掩盖

>屏蔽是一种使您可以在隐藏其余部分时在屏幕上显示元素的选定部分或图像的技术。 Web开发人员可以通过Mask属性和SVG蒙版元素在浏览器中使用此技术。这些功能允许您在浏览器中显示对图像和其他元素的效果，而无需使用任何形式的图像编辑软件。

>在本文中，我将向CSS和SVG屏蔽功能展示，还确保包括有关当前浏览器支持问题的一些信息。> 在撰写本文时，大多数代码示例仅在Webkit浏览器中工作，而基于SVG的面具似乎享有更广泛的浏览器支持。因此，如果您想尝试示例，建议您使用像Chrome这样的Webkit浏览器。

钥匙要点

CSS和SVG中的

屏蔽允许使用CSS`mask`属性或svg`

'元素的元素选择性可见性。

浏览器支持各不相同：CSS面具主要支持Webkit浏览器，而SVG掩码在包括Firefox和Internet Explorer在内的现代浏览器之间具有更广泛的兼容性。> >蒙版属性，例如`bask-image'，`bask mode'，`bask-repeat`，`bask-position'和`bask-size''和`bask-size'可以单独设置或合并到速记``为方便起见。
高级掩蔽效果，包括动画和使用文本作为掩码，增强了Web Design的灵活性和创造力。

> 使用PNG映像，CSS梯度或SVG元素来隐藏页面上的某些部分或其他元素。您可以使用CSS蒙版属性来完成此操作。

> 在本文中，我将专注于使用CSS蒙版属性和SVG 元素掩盖。

css mask属性

>蒙版是CSS速记属性，用于整个单个属性。让我们更详细地仔细研究其中的一些。

>蒙版图像属性

>您可以使用蒙版图像属性设置元素的掩码层图像。

值无与设置没有值的值不同。相反，它仍然算作透明的黑色图像层。

>

>您可以将掩码图像设置为URL值。这可以是通往PNG图像文件，SVG文件或对SVG 元素的引用的路径。您可以通过添加由逗号分隔的相应数量的URL值来设置多个掩码图像层。

以下是一些示例：

/* 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 元素，其ID > bask1 ：

.masked-element {
  mask-image: url(#mask1);
}

梯度图像也是掩码图像属性的合适值：>

.masked-element {
  mask-image: linear-gradient(black 0%, transparent 100%);
}

> mask模式属性

>带有蒙版模式，您可以将蒙版层图像设置为alpha蒙版或亮度蒙版。

alpha蒙版是具有alpha通道的图像。更详细地说，alpha通道是每个像素数据中包含的透明信息。将蒙版模式属性设置为alpha的掩蔽操作将使用图像的alpha值作为掩码值。

一个方便的alpha通道示例是一个带有黑色和透明区域的PNG图像。蒙版元素将通过蒙版图像的黑色部分显示，其alpha值为一个。透明部分下方的其他所有内容都将隐藏为零。

我将使用此png图像作为我的alpha面具：

>并在下面的JPG图像上执行掩蔽操作：

这是魔术发生的地方：

>这就是浏览器中结果的样子：

.masked-element {
  mask-image: url(alpha-mask.png);
  mask-mode: alpha;
}

亮度蒙版将图像的亮度值用作掩模值。像上面的png图像 - 但在白色中 - 是亮度面具的一个很好的例子：

您要掩盖的元素的区域（由面具的白色像素覆盖）将介绍。面具的透明像素所覆盖的蒙版元素的部分将被隐藏。> 用CSS和SVG在浏览器中掩盖

>将蒙版模式属性设置为亮度，并将上图作为我的掩码，将显示与以前相同的结果。

这是代码：

>“ mask-repeat属性”

> mask-repeat的工作非常类似于背景重复属性。它设置了它们的大小和位置后，它会控制蒙版层图像的平铺。

可能的值为：

> no-repeat：在可用的空间中未重复掩码层图像。
重复Y：掩码层图像在Y坐标下重复。
例如，这是我打算用作掩模的图像：

导致以下掩蔽效果：

>“蒙版位置属性”

/* 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背景图像属性相同的值。它的初始值是中心。

例如，如果要将蒙版映像层放在视口的左上角，请将蒙版位置属性设置为用CSS和SVG在浏览器中掩盖

> 0 0 0

的值

这是浏览器中上面的代码的样子：>

>将上面的蒙版位置属性的值更改为> 100％100％，在视口右下方显示蒙版层图像：>

.masked-element {
  mask-image: url(#mask1);
}

>“蒙版”属性

>您可以使用Mask-size属性快速设置蒙版层图像的大小，该属性接受与更熟悉的CSS背景大小属性相同的值。用CSS和SVG在浏览器中掩盖

> 例如，将蒙版大小设置为50％，以其完整宽度的50％显示掩码层图像：

>设置蒙版大小以包含，将掩盖层图像缩放到最大尺寸，以使其宽度和高度都可以安装在掩模定位区域内：

您可以在下面的Codepen上看到这些演示：

>请参阅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：

绘制在> mask1.png 的顶部 减去：显示不重叠
的> bask2.png 的部分。因此，浏览器至少在暂时不支持标准关键字，因此您需要使用相应的合成操作员关键字源 Intersect：显示的部分重叠
。但是，Webkit浏览器是唯一支持CSS掩码的浏览器的浏览器，即使使用了非标准的复合源关键字，也似乎在屏幕上没有显示任何内容。 排除：显示不重叠的 bask1.png和 bask2.png 的部分。再一次，由于标准关键字尚无支持，因此您使用合成操作员XOR更好了。
>您也可以在下面的Codepen演示中查看实时演示：> >请参阅codepen上的sitepoint（@sitepoint）的笔CSS蒙版组合。

> shorthand属性

>您可以使用Mask进行控制CSS掩盖操作的所有属性。

这是完整的面具速记：

> mask-origin和mask-clip工作，例如更熟悉的背景 - 原始属性和背景折叠属性。

>尽管您可以在蒙版速记中重新排序属性，但您需要在蒙版属性之后设置蒙版属性，并由“/”符号隔开。此外，设置掩码大小而不设置蒙版位置将导致无效声明。

>最后，由于您无法在掩码属性上指定的任何值都设置回其初始默认值，因此当您需要重置任何单个属性时，使用掩码非常方便。

svg掩码元素

.masked-element {
  mask-image: url(#mask1);
}

可扩展的向量图形或简称SVG是一种基于XML的语言，用于标记图形。

您可以在SVG文档中使用元素来为HTML元素和其他SVG图形添加掩码效果。

> SVG可以做的另外一件很酷的事情是使用文本掩盖页面上的其他元素。

>让我们仔细观察这些可能性。

>

在HTML元素上使用SVG 元素

在编写时，使用内联SVG图形内的元素掩盖HTML元素仅在Firefox浏览器中起作用。这是一个示例：

与以下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);
}

>在上面的代码中，我包含了一个元素，其ID为>>>>> 。在面具内部，我放置了一个黑色和白色梯度，ID为 grad和一个圆形形状，该梯度将梯度用作其填充颜色。

>最后，我在CSS蒙版属性中引用了SVG 元素的ID值。这将蒙版效果应用于页面上的图像。

>仅通过为页面背景和蒙版图像添加其他一些样式声明，您就可以实现出非常戏剧性的效果，如下面的效果：

请注意，圆面膜的部分如何填充梯度的白色阴影，使蒙版的图像通过。相反，该部分充满了梯度的黑色色调，隐藏了掩盖的图像。

这是在codepen上进行的实时演示（请记住，它只能在firefox上使用！）。

>请参阅codepen上的sitepoint（@sitepoint）的inline svg掩码元素的笔蒙版。

在SVG图形上使用SVG 元素

>您可以在上一个示例中使用相同的SVG 元素，但是这次掩盖了SVG图形而不是HTML元素。优点是浏览器支持更好，包括WebKit浏览器和最新的IE。

>在下面的摘要中，我将要将图像放置在SVG元素中，然后将CSS蒙版属性应用于它。 CSS蒙版属性引用了带有 bask1 元素，就像上一个示例一样。这是蒙版SVG图形的代码：

这是负责CSS中掩盖操作的片段：

结果与上一个示例几乎相似，只有这次您才能在所有主要浏览器上查看它。

.masked-element {
  mask-image: url(#mask1);
}

看Codepen演示：

.masked-element {
  mask-image: linear-gradient(black 0%, transparent 100%);
}

>请参阅sitepoint（@sitepoint）上的SVG元素上的Pen SVG蒙版。用SVG文本

掩盖

>您可以使用SVG蒙版内的文本元素执行掩蔽操作：

上面的摘要在SVG蒙版内添加了一个黑色SVG文本元素，并使用CSS蒙版属性将其应用于浅蓝色的SVG椭圆形。椭圆形形状后面的任何内容（在这种情况下，它是身体的背景图像）将通过文本显示。结果看起来像这样：

完整的代码可在Codepen上使用：

>请参阅codepen上的sitepoint（@sitepoint）的笔svg文本蒙版。

>动画蒙版

>您可以使用CSS Transition和KeyFrame Animation动画掩码位置和掩模大小。

下面是星形PNG掩码图像的基本关键帧动画示例。

这是相关的代码段：>

蒙版元素是html

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);
}

用CSS和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在浏览器中掩盖标签上添加掩码效果，然后使用CSS进行动画。

这是一个快速的编码器演示：在任何浏览器上都可以看到动画，但是屏蔽仅在Firefox中呈现：>

>请参阅sitepoint（@sitepoint）上的html元素上的pen动画svg蒙版。

好消息是，如果您将SVG掩码应用于Inline SVG图形，浏览器支持立即Sky-Rockets。仅使用SVG查看相同的动画演示：

>请参阅sitepoint（@sitepoint）在codepen上的svg元素上的pen动画svg蒙版。

>浏览器对蒙版属性的支持

>在本文中，我介绍了浏览器支持问题。写作时情况的简单崩溃，看起来像这样：

在HTML元素上使用CSS Mask属性在WebKit浏览器上使用-Webkit- vendor前缀。 HTML元素上仅支持Firefox上的HTML元素上的Inline SVG掩码元素。

SVG元素上的Inline SVG屏蔽元素在Webkit浏览器以及Firefox和最新的Internet Explorer中支持。>

Yoksel的这款出色的Codepen演示就浏览器的支持而言提供了最先进的视觉插图。

alan greenblatt提供了一个GitHub存储库，他可以在其中支持与CSS图形相关的属性的详细信息。

>我可以使用网站上的浏览器支持兼容性表提供了更多详细信息和链接到更多资源。

>尽管当前对CSS蒙版的浏览器支持并不是很好，但是如果您将此功能用作一些装饰元素的增强功能，但不支持浏览器的用户甚至不会注意到它们会错过。

>最后，使用SVG 元素在SVG图形上应用掩蔽效果，在现代浏览器上享有最广泛的支持，并且在网上看起来很棒。

资源

在CSS-tricks上的CSS中剪切和掩盖
codrops css css用掩模图像
> svg 在mdn
SVG面具
css掩盖。

>在CSS和SVG掩蔽上的常见问题（FAQ）

> CSS和SVG掩码之间有什么区别？

CSS和SVG掩蔽均使您可以隐藏或揭示元素的部分。但是，他们的方法和能力有所不同。 CSS蒙版使用图像作为掩模层，其中掩码图像的alpha通道决定了元素的可见性。另一方面，SVG屏蔽使用矢量图形作为掩模层，该图形提供了更大的灵活性和控制掩码的形状和大小。 SVG掩蔽还支持颜色和梯度掩模，CSS掩盖不可能。

>如何使用SVG？

为您的网络元素添加独特的视觉效果。要创建带有SVG的梯度蒙版，您需要定义蒙版元素内的线性级别或径向级别元素。梯度元素应至少具有两个停止元素，该元素沿梯度沿不同点的颜色和不透明度定义。

我可以使用CSS和SVG屏蔽吗？

是的，您可以使用CSS并共同掩盖以创建复杂的掩蔽效果。您可以将CSS掩码应用于元素，然后将SVG掩码应用于同一元素。该元素的最终可见性是由两个掩码的组合确定的。

为什么我的CSS掩码不在Internet Explorer中工作？

CSS掩码在Internet Explorer中不支持。如果您需要支持Internet Explorer，则应改用SVG掩码。在所有主要浏览器中都支持SVG屏蔽，包括Internet Explorer。对于CSS掩盖，您可以使用CSS动画或过渡来对掩码图像属性进行动画动画。对于SVG屏蔽，您可以使用SVG动画来对蒙版元素进行动画。