CSS屏蔽
Get 10 Free Images From Adobe Stock. Start Now.ads via Carbon
从Adobe Stock获得10张免费图片。现在开始。广告通过Carbon
In the design world, masking is a popular technique to achieve unique design effects. As a designer, I’ve used it many times, but my usage of it on the web is rare. I think that the reason that kept me from not using a CSS mask is the browser support, they are partially supported in blink browsers (Chrome and Edge) and fully supported in Safari and Firefox.
在设计界，遮蔽是一种流行的技术，可以实现独特的设计效果。作为一个设计师，我曾多次使用过它，但我在网络上的使用却很少。我认为让我不使用CSS遮罩的原因是浏览器的支持，它们在blink浏览器（Chrome和Edge）中得到部分支持，在Safari和Firefox中得到完全支持。
The great news is that CSS masking will be part of Interop 2023, which means we should expect cross-browser support (Yay!!).
最大的好消息是，CSS屏蔽将是Interop 2023的一部分，这意味着我们应该期待跨浏览器支持（耶！！）。
In this article, I will go through what CSS masking is, how it works, and a few use cases and examples for it.
在这篇文章中，我将介绍什么是CSS屏蔽，它是如何工作的，以及它的一些使用情况和例子。
Let’s dive in.
让我们深入了解一下。
Table of contents
目录
What is masking?
什么是遮蔽？
In simple words, masking works in a way that hides part of an element without erasing it.
简单地说，遮蔽的工作方式是在不擦除元素的情况下将其部分隐藏。
Consider the following figure:
请看下图：
We have an image, and we have a mask. In design apps like Photoshop, we can insert the image inside the grey shape, and it will result in a masked image.
我们有一个图像，我们有一个遮罩。在像Photoshop这样的设计应用程序中，我们可以将图像插入灰色的形状内，这样就会产生一个蒙版的图像。
The way that works is that it hides some parts of the image without erasing it (They are still there, but hidden).
其工作方式是，它隐藏了图像的某些部分，但并不擦除它（它们仍然存在，但被隐藏起来）。
This is the core concept of masking, which is to use a shape to show and hide parts of an element. We can take that further and explore even further and more unique ways to mask content.
这就是遮罩的核心概念，即用一个形状来显示和隐藏一个元素的部分。我们可以更进一步，探索更多更独特的方式来掩盖内容。
For example, we can create a gradient mask like the following one.
例如，我们可以创建一个像下面这样的梯度蒙版。
In a gradient, there are filled and transparent pixels. The filled ones are where the element’s part will be visible, and the transparent one is where the hidden parts are.
在梯度中，有填充...