如何使用 CSS 为图像添加遮罩？

通过使用 CSS，我们可以为图像添加各种复杂的遮罩效果，从而使图像具有更好的视觉效果。下面，我们将介绍三种常见的方式来为图像添加遮罩。

1. 使用 CSS 的 mask 属性

首先，我们可以使用 CSS 的 mask 属性来为图像添加遮罩效果。该属性需要设置两个参数：mask-image 和 mask-mode。

img {
  mask-image: url('mask.png');
  mask-mode: alpha; /*还可以设置 luminance 或 match-source*/
}

其中，mask-image 指定了要使用的遮罩图像的 URL，而 mask-mode 指定了遮罩的模式。常用的模式有 alpha、luminance 和 match-source。

2. 使用 CSS 的 clip-path 属性

另外，我们还可以使用 CSS 的 clip-path 属性为图像添加遮罩效果。该属性需要设置一个裁剪路径，可以通过多种方式来指定。

img {
  clip-path: url('clip-path.svg#clip-path1'); /*还可以设置 circle、inset()/circle() 等*/
}

其中，clip-path 可以接受多种裁剪路径，比如一个 URL、一个基本形状（如 circle）或者一个函数（如 inset()/circle() 等）。需要注意的是，该属性还需要浏览器支持 SVG。

3. 使用 CSS 的 blend-mode 属性

最后，我们可以使用 CSS 的 blend-mode 属性来为图像添加混合颜色效果，从而达到遮罩的效果。该属性需要设置两个参数：background-color 和 blend-mode。

img {
  background-color: #000;
  blend-mode: multiply;
}

其中，background-color 指定了要和图像混合的颜色，而 blend-mode 则指定混合的模式。常用的模式有 multiply、screen、overlay、soft-light 等。

总结

通过上述三种方式，我们可以轻松地为图像添加各种复杂的遮罩效果。需要注意的是，不同浏览器对这些属性的支持程度可能不同，需要在实践中进行测试和调整。