使用 CSS 为图片添加蒙版
我们可以在元素上添加一个图层，以便部分或完全隐藏该元素。mask-image 属性是一个 CSS 属性，它指定元素上的图层，也可以是图片，但我们必须使用图片的地址才能在该图片上添加蒙版。
在本文中，我们将了解如何使用 CSS 属性为图片添加蒙版，以及如何使用同一属性实现更多功能。
为图片添加蒙版
mask-image 属性是我们将要使用的属性，用于在所需的图片或文本上添加蒙版。该属性添加一个图层，用于部分或完全隐藏图片。为了更好地理解该属性，让我们快速浏览一下它的语法。
语法
mask-image: none, <image>, initial, inherit;
mask-image 属性可以使用不同的值，none 值表示不添加遮罩层，但在图像或文本上设置一个透明的黑色层。<image> 值可以从线性渐变中添加遮罩。initial 值会将属性值设置为默认值，而 Inherit 值将继承使用此属性的元素的最近父级的 mask 属性。
为了更好地理解该属性，我们将通过一个示例来清楚地了解 mask-image 属性值的工作原理。
示例
在本例中，我们将使用 <make-source>值并添加图像地址，以便我们在图像上添加蒙版。
在这里，我们创建了一个类容器，然后进入 CSS 部分，首先更改了高度和宽度，然后将 mask 属性与要打印的图像一起使用。让我们看看代码的输出结果。
<!DOCTYPE html>
<html lang="en">
<head>
<title>An example of using the make-source property</title>
<style>
.contain {
width: 330px;
height: 330px;
background-image: url(
"https://www.cainiaomax.com/static/images/simply-easy-learning.jpg"
);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-position: center;
-webkit-mask-box-image: url(https://www.cainiaomax.com/images/logo.png);
}
body {
background-color: white;
}
</style>
</head>
<body>
<div class="contain"></div>
</body>
</html>
这是我们将得到的输出，您可以看到，使用 mask-image 属性后，图像现在已被遮罩。
现在我们将在另一个示例中使用新的属性值，因此让我们转到下一个示例。
示例
在此示例中，我们将使用 mask-image 属性并将其值设置为线性渐变，现在，让我们转到代码来了解此属性的工作原理。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of using mask-image property</title>
<style>
.container {
height: 130px;
width: 130px;
background-image: url(
"https://www.cainiaomax.com/coffeescript/images/coffeescript-mini-logo.jpg");
background-position: center;
background-size: cover;
-webkit-mask-image: linear-gradient(
to top, transparent 19%, black 81%);
background-repeat: no-repeat;
mask-image: linear-gradient(
to top, transparent 19%, black 21%
);
}
body {
background-color: white;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
在上面的代码中，我们首先创建了一个容器，然后在 CSS 部分中更改了它的高度和宽度。之后，我们添加了要添加蒙版的图像，并使用 mask-image 属性将其值设置为线性渐变。我们将黑色设置为 81%，透明度设置为 20%。让我们快速浏览一下上面的代码。
在上面的例子中，您可以看到图像从底部开始透明，这意味着蒙版已应用于图像。
注意 - 如果我们将线性渐变中黑色的值设置为 100%，则图像将完全对用户可见;如果将透明度设置为 100%，则图像将被蒙版完全隐藏。
示例
在下面的例子中，我们将属性值更改为径向渐变，这意味着蒙版现在将以圆形形式添加，代码的其他部分类似。让我们看看使用下面的代码将获得的输出。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Another example for the image-mask property</title>
<style>
.mask2 {
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
-webkit-mask-image: radial-gradient(circle, black 49%, rgba(0, 0, 0, 0.5) 50%);
}
</style>
</head>
<body>
<h1>This is an example of the mask-image property</h1>
<h3>We are using the gradient value</h3>
<div class="mask2">
<img src="https://www.cainiaomax.com/images/logo.png" width="600" height="400">
</div>
</body>
</html>
执行上述程序后，您可以看到蒙版呈圆形，因为图像的某些部分是透明的，而其他部分是暗的。
为什么使用 -webkit 前缀?
我们使用 -webkit 前缀是因为大多数浏览器都部分支持我们目前使用的蒙版。我们将 -webkit 前缀与标准属性一起使用，以便与所有浏览器兼容。
结论
CSS 中的蒙版可以根据属性的值，部分或完全隐藏属性。蒙版的用法类似于 mask-clip、mask-image、mask-mode、mask-origin 等等。蒙版属性可以在图像或文本上设置蒙版，我们甚至可以更改要应用的蒙版的形状。蒙版将应用于图像，使其对用户更具沉浸感，或隐藏图像的某些部分。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
