用CSS给图片添加遮罩

我们可以在一个元素上放置一个图层，这样我们就可以部分或完全隐藏该元素。mask-image属性是一个CSS属性，它指定了元素上的层，它也可以是一个图像，但我们必须使用图像的地址在该图像上添加一个掩码。

在这篇文章中，我们将看看如何使用CSS属性为图片添加遮罩，以及我们可以用同一属性做更多的事情。

为图像添加遮罩

mask-image属性是我们将要使用的属性，以便在所需的图像或文本上添加一个掩码。该属性添加了一个层，可以部分或完全隐藏图像。为了更好地理解该属性，让我们快速了解一下该属性的语法。

语法

mask-image: none, <image>, initial, inherit;

mask-image属性使用不同的值，none值将不添加遮罩层，但会在图像或文本上设置一个透明的黑色层。<image>值可以添加一个来自线性渐变的遮罩。初始值将把该属性的值设置为默认值，继承值将继承使用该属性的元素的最近的父类的遮罩属性。

为了更好地理解这个属性，我们将看一个例子，这样我们就能清楚地看到掩码-图像属性的值是如何工作的。

示例

在这个例子中，我们将使用<make-source>值，并添加图像的地址，这样我们就可以在图像上添加掩码。

在这里，我们创建了一个类容器，然后进入CSS部分，首先改变了高度和宽度，之后我们使用掩码属性以及我们想要打印的图片。让我们看看我们将从代码中得到的输出。

<!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.tutorialspoint.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.tutorialspoint.com/images/logo.png);
      }
      body {
         background-color: white;
      }
   </style>
</head>
<body>
   <div class="contain"></div>
</body>
</html>

这就是我们将得到的输出，你可以看到，在使用属性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.tutorialspoint.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部分改变其高度和宽度。之后，我们添加了我们想放在遮罩上的图像，并使用遮罩-图像属性，将其值设置为衬里梯度。在这里，我们将黑色设置为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.tutorialspoint.com/images/logo.png" width="600" height="400">
   </div>
</body>
</html>

在执行上述程序时，你可以看到遮罩是圆形的，因为图像的一部分是透明的，另一部分是暗的。