【CSS】属性Masking

翻译已于 2023-04-14 11:33:40 修改 · 1.2k 阅读

7 ·

CC 4.0 BY-SA版权

原文链接：https://ishadeed.com/article/css-masking/#masking-with-css-gradients

文章标签：

#css

于 2023-04-14 11:27:55 首次发布

移动WEB 专栏收录该内容

4 篇文章

订阅专栏

在设计界，Masking是一种流行的技术，可以实现独特的设计效果。作为一名设计师，我用过很多次，但在网络上很少使用它。我认为阻止我不使用 CSS mask的原因是浏览器支持，它们在 blink 浏览器（Chrome 和 Edge）中得到部分支持，在 Safari 和 Firefox 中得到完全支持。

好消息是 CSS Masking将成为Interop 2023的一部分，这意味着我们应该期待跨浏览器支持。在本文中，我将介绍什么是 CSS Masking、它是如何工作的，以及它的一些用例和示例。让我们开始吧。

一、什么是Marking？

简而言之，遮罩的工作方式是隐藏元素的一部分而不将其擦除。

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。
如下图：
在这里插入图片描述
我们有图像，我们有面具。在 Photoshop 等设计应用程序中，我们可以将图像插入灰色形状内，这将产生蒙版图像。

工作方式是隐藏图像的某些部分而不删除它（它们仍然存在，但隐藏了）。
在这里插入图片描述
这就是masking的核心概念，就是用一个形状来显示和隐藏元素的一部分。我们可以更进一步，探索更深入、更独特的方式来掩盖内容。

例如，我们可以创建一个如下图所示的渐变蒙版。
在这里插入图片描述
在渐变中，有填充像素和透明像素。填充的是元素部分可见的地方，透明的是隐藏部分所在的地方。

在 Photoshop 中，我们可以为一组图层添加图层蒙版，该组中的内容将被蒙版在其中。它的工作方式是使用画笔工具隐藏组的一部分，它会被遮罩。

在这里插入图片描述
被屏蔽的内容不会被删除，它只是被隐藏（注意组项目）。

好吧，足够的理论。在接下来的部分中，我将研究 CSS 的屏蔽方式。

二、如何在 CSS 中Mask

在 CSS 中，有几种方法可以屏蔽元素：

The mask property
The clip-path property
SVG <mask>

Mask 属性和 clip-path 的主要区别是前者用于图像和渐变，后者用于路径。对于本文，重点将放在 mask 属性上。

在 CSS 中，我们有简写属性mask，它类似于background属性。是的，你没有看错。这就是为什么我认为它的语法很容易记住，因为它在字面上与背景属性相同，但几乎没有附加属性。

我不会列出所有CSS屏蔽属性，而是通过一个逐渐添加屏蔽功能的示例，以便您可以直观地发现差异。

CSS 背景看起来像这样：

.card__thumb {
    background-image: url('hero-cool.png');
}

…和一个 CSS 掩码看起来像这样:

.card__thumb {
    mask-image: url('hero-cool.png');
}

在这里插入图片描述
这很酷，对吧？这将使理解和记忆 CSS 掩码变得更加容易。让我们用 CSS 重做最初的例子。首先，我需要将形状导出为 png 图像。

在这里插入图片描述
假设我想将蒙版应用于图像。

<img src="ahmad-shadeed-web-directions.jpg" alt="" />

img {
    mask-image: url("shape.png");
}

你能期待结果吗？默认情况下，蒙版会重复，其大小等于蒙版图像本身。目前，结果如下所示：
在这里插入图片描述

img {
    mask-image: url("shape.png");
    mask-repeat: no-repeat; 
}

在这里插入图片描述
惊人的！请注意，遮罩位于左上角。我们可以通过 mask-position改变它。再次注意语法与 CSS 背景图像是如何相同的！

img {
    mask-image: url("shape.png");
    mask-repeat: no-repeat;
    mask-position: center;
}

在这里插入图片描述
除了位置，我们还可以改变遮罩尺寸。这对于使蒙版图像响应元素的大小很有用。

img {
    mask-image: url("shape.png");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 60%;
}

在这里插入图片描述
还有一些Mark属性，但我现在不想用它们让你不知所措，我稍后会用实际用例来介绍它们。

三、使用 CSS 渐变遮罩

CSS 遮罩不仅仅是使用图像，我们还可以利用渐变来创建强大且有用的遮罩效果。稍后我将展示一些有用的用例，但现在，我想专注于渐变如何与遮罩一起工作的核心基础。在下面的示例中，mask-image由从全黑到透明的 CSS 线性渐变组成。

img {
    mask-image: linear-gradient(#000, transparent);
}

在这里插入图片描述
根据MDN：
默认情况下，这意味着遮罩图像的alpha通道将乘以元素的alpha通道。这可以通过 mask-mode 属性来控制。这意味着，您可以使用黑色以外的任何颜色，并且遮罩仍然有效，因为默认遮罩模式设置为alpha（我稍后会详细介绍）。

img {
    mask-image: linear-gradient(red, transparent);
}

在这里插入图片描述
同样，掩蔽的概念是隐藏透明像素。这是带有硬色标的渐变的简化示例：

img {
    mask-image: linear-gradient(#000 50%, transparent 0);
}

在这里插入图片描述
现在核心遮罩概念已经清楚（我希望如此），让我们探索 CSS 遮罩的一些实际用例。

四、实际用例和示例

1、褪色图像

遮罩的一个有趣用法是当我们想要淡化图像并使其与下面的背景融合时。

考虑下图：
css-masking-use-case-fade-image-light.png
乍一看，您可能会考虑添加与背景颜色相同的渐变。是这样的：

.hero__thumb:after {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #f1f1f1, transparent)
}

虽然这可能有效，但当主要背景颜色更改时它将失败。注意英雄形象现在如何硬停：
在这里插入图片描述
使用 CSS 遮罩，我们可以遮罩主图并使其适用于任何背景颜色。

.hero__thumb {
    mask-image: linear-gradient(#000, transparent);
}

就是这样！现在淡出效果是真实的，不会在主页面背景改变时失效。请参阅以下示例：
在这里插入图片描述

2、屏蔽文本内容：示例 1

当我们想要显示一个长文本但空间不足以显示完整时，解决方案是在开始和结束时淡出文本。然后，文本将在任一方向上显示动画以显示剩余内容。
考虑下图：
在这里插入图片描述
同样，使用渐变 hack 是行不通的，因为内容下方的背景会发生变化。它可以是纯色或图像。

要在 CSS 中实现这一点，我们需要添加一个渐变遮罩，在开始和结束时淡出内容。我喜欢先在 CSS 渐变中这样做并查看结果，然后将其用作蒙版。这有助于在将渐变用作遮罩之前可视化渐变。

.c-card__footer {
    background-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent 100%);
}

在这里插入图片描述
有了上面的东西，我们就可以把它当作面膜了。

.c-card__footer {
    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent 100%);
}

还是不完美？我们可以修改梯度值，直到结果完美为止。

3、屏蔽文本内容：示例 2

这与前面的示例相同，但垂直应用。我在 Instagram 的直播视频中看到过这一点。
考虑下图：
在这里插入图片描述
注意到内容是如何从顶部被洗掉的吗？这个小地方可以有提要评论、操作和其他东西。使用 CSS 掩码是完美的选择。首先，让我们看一下渐变。

在 CSS 中，它可以是这样的：

.whatever-the-class-name {
    mask-image: linear-gradient(to bottom, transparent, #000);
}

4、屏蔽列表

在研究 CSS 掩码时看到了 Scott Tolinski 的这个很酷的例子。这个想法是我们有一个功能、课程或其他任何内容的列表。我们想淡出文本以使用户对其中的内容更加好奇。
考虑以下示例：
在这里插入图片描述
正如您在左侧看到的，我们有一个列表，在最底部，它已淡出。为此使用 CSS 遮罩是完美的，因为它可以与下面的背景融合，无论是图像还是深色背景。

让我们看一下遮罩渐变以了解其工作原理。

.list {
    mask-image: linear-gradient(to bottom, #000, transparent 95%);
}

5、有趣的图像效果

使用 CSS 遮罩和渐变，创造视觉效果的可能性是无限的。这是我们如何为图像创建视觉效果的简单示例。这是我为这个演示所做的快速设计。
在这里插入图片描述
您看到的图像效果由 5 个线性渐变组成。通过为每个位置添加不同的位置，我们可以得到类似的东西。让我们仔细看看渐变：

.thumb {
    mask-image: linear-gradient(to bottom, #000, #000),
    linear-gradient(to bottom, #000, #000),
    linear-gradient(to bottom, #000, #000),
    linear-gradient(to bottom, #000, #000),
    linear-gradient(to bottom, #000, #000);
    mask-size: 18% 70%;
    mask-position: 0 100%, 25% 25%, 50% 50%, 75% 0, 100% 50%;
    mask-repeat: no-repeat;
}

在视觉上，面具看起来像这样：
在这里插入图片描述
要在遮罩的每个矩形上创建淡入淡出效果，我们需要更新每个渐变并包含关键字transparent。

.thumb {
    mask-image: linear-gradient(to bottom, transparent, #000),
    linear-gradient(to bottom, #000, transparent),
    linear-gradient(to bottom, transparent, #000),
    linear-gradient(to bottom, #000, transparent),
    linear-gradient(to bottom, transparent, #000);
    mask-size: 18% 70%;
    mask-position: 0 100%, 25% 25%, 50% 50%, 75% 0, 100% 50%;
    mask-repeat: no-repeat;
}

在这里插入图片描述
我们还可以在悬停时设置遮罩大小或位置的动画。

在这里插入图片描述
这很强大。想象一下将其与基于滚动的动画相结合。事情可能会失控（虽然以一种很好的方式）。

6、圆出标签

我考虑过尝试使用 CSS 掩码来处理名为Round out corners的 UI 处理。我们的想法是，我们希望以一种与元素融合的方式来圆整元素的边border-radius。
在这里插入图片描述
在这篇博文中，Chris Coyier 解释了通过使用多个伪元素实现这一目标的技巧。一个更动态的解决方案是使用 CSS 掩码。

首先，让我们仔细看看我想要实现的形状。
在这里插入图片描述
形状由正方形和圆形组成。我们需要的是它们的交集。如何实现？
我们可以使用多层蒙版和属性mask-composite对其进行堆肥操作。首先，我们需要创建一个元素来保存遮罩。

.nav-item.active:before {
    content: "";
    position: absolute;
    left: 100%;
    bottom: 0;
    width: 24px;
    height: 24px;
    background-color: var(--active-bg);
}

在这里插入图片描述
在那个空间内，我们需要画一个圆和一个正方形来合成它们。幸运的是，我们可以通过混合线性和径向渐变来做到这一点。

.nav-item.active:before {
    content: "";
    position: absolute;
    left: 100%;
    bottom: 0;
    width: 24px;
    height: 24px;
    background-color: var(--active-bg);
    background-image: linear-gradient(to top, #000, #000),
    radial-gradient(circle 15px at center, #000 80%, transparent 81%);
    background-size: 12px 12px, 100%;
    background-position: bottom left, center;
    background-repeat: no-repeat, repeat;
}

请注意以下事项：

我添加了12px 12px正方形的大小。
广场位于拐角处bottom left。
方形不需要背景重复。

在这里插入图片描述
上面只是为了直观地说明两个渐变的外观。下一步就是制作它们！在 CSS masking 中，我们可以使用该mask-composite属性来合成两个形状。

.nav-item.active:before {
    content: "";
    position: absolute;
    left: 100%;
    bottom: 0;
    width: 24px;
    height: 24px;
    background-color: var(--active-bg);
    mask-image: linear-gradient(to top, red, red),
    radial-gradient(circle 15px at center, green 80%, transparent 81%);
    mask-size: 12px 12px, 100%;
    mask-position: bottom left, center;
    mask-repeat: no-repeat, repeat;
    mask-composite: subtract;
}

这是上面的结果：
在这里插入图片描述
上面是右侧形状的CSS。对于另一个，我们可以简单地改变它mask-position，它就会翻转。

.nav-item.active:after {
    /* other styles */
    mask-position: bottom right, center;
}

7、多头像截图

在我关于剪切效果的文章中，我探索了在 CSS 中创建剪切的不同方法。其中一个示例适用于 CSS 屏蔽。
在这里插入图片描述

.avatar {
    -webkit-mask-image: radial-gradient(ellipse 54px 135px at 11px center, #0000 30px, #000 0);
}

在这里插入图片描述
我强烈建议阅读这篇文章，因为有很多类似的详细示例。

结局

当我开始更多地了解 CSS 中的掩码时，资源有限。更重要的是，我们可以在日常工作流程中使用的实际用例非常少。我希望到本文结束时，您现在已经知道在下一个项目中在哪里使用 CSS 掩码。

感谢您阅读。

作者：Ahmad Shadeed
翻译：https://ishadeed.com/article/css-masking/#masking-text-content-example-1