CSS、SVG 和 Canvas 蒙版

CSS 蒙版

用CSS表达蒙版的优点是简单并且只需要很少的代码。实现蒙版表达式的 CSS 属性包括以下内容。

mask-image
clip-path
background-clip
覆盖图像
mask-image 可以在属性中设置遮罩的图像。下图是使用星形图像裁剪图像的示例。
相关属性包括：
mask-repeat：重复蒙版图像
mask-position：遮罩位置
mask-size：遮罩图像尺寸
```
.mask-img {
mask-image: url("./images/star.svg");
mask-repeat: no-repeat;
mask-position: 0 0;
mask-size: 50%;
/* Chrome, Safari用 */
-webkit-mask-image: url("./images/star.svg");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: 0 0;
-webkit-mask-size: 50%;
}
```
裁剪路径
接下来clip-path我们就来介绍一下属性。诸如（圆）、（椭圆）和（多边形）之类的属性可以clip-path作为参数给出。换句话说，如果遮罩具有简单的形状，则不需要遮罩图像。通过使用 polygon，您可以轻松地将元素修剪成三角形、五边形和平行四边形等难以裁剪的形状。

.clip {
  width: 20px;
  height: 20px;
  background-color: skyblue;
  clip-path: circle(50px at center);
}

clip-pathmask-image您还可以指定图像 URL 作为参数。path您还可以通过剪切内联编写的 SVG 形状或添加来表达曲线。

背景裁剪

background-clip是属性。专门描述了background-clip按属性进行的裁剪。background-clip: text

background-clip:text带有的元素被内部文本元素挖空。在下面的示例中，背景图像被剪切出单词“TEXT”。这时候如果有文字颜色的话，就不会被遮罩了，所以color: transparent指定一下。

微信截图_20241213165340.png

<div>
  <p>TEXT</p>
</div>

div {
  background-image: url("./bg.png");
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

SVG遮罩

对于 SVG 中的蒙版，请为蒙版准备一个 SVG 元素。您可以

下面显示了示例代码。这是将黑色矩形剪成圆形的示例。我将标签属性指定为绘制矩形的标签属性。这允许您使用标记内写入的元素进行掩码。maskid

<svg>
  <defs>
    <!-- 遮罩图形 -->
    <mask id="circle">
      <circle cx="100" cy="100" r="80" fill="#fff"></circle>
    </mask>
  </defs>
  <!-- 被裁剪的元素 -->
  <rect x="0" y="0" width="100%" height="100%" mask="(#circle)" fill="#000"/>
</svg>

与标签类似，您也可以使用标签进行屏蔽。在这里，也为要遮盖的一侧和要遮盖的一侧编写SVG。

<svg>
  <defs>
    <!-- 遮罩图形 -->
    <clipPath id="circle">
      <circle cx="100" cy="100" r="80" fill="#000"></circle>
    </clipPath>
  </defs>
  <!-- 被裁剪的元素 -->
  <rect x="0" y="0" width="100%" height="100%" clip-path="(#circle)"/>
</svg>

剪辑路径和蒙版之间的区别

“mask”和“clip-path”可用于 CSS 和 SVG 中的遮罩。这里我们将解释它们之间的区别。两者的挖空目的是一致的，但主要的区别在于是否可以应用透明信息。 “mask”应用掩模图像的透明度信息，但“clip-path”则不应用。

例如，如果将两者应用到具有透明度信息的图像，则应用了透明度信息的蒙版和未应用透明度信息的剪辑路径之间将出现以下差异。
微信截图_20241214194634.png
此外，在 SVG 中，您可以将标签上的属性设置为 CSS 属性。您可以选择亮度蒙版mask-type（根据蒙版图像的亮度确定蒙版的透明度）和alpha 蒙版（根据蒙版图像的透明度信息确定蒙版的透明度）。

具体mask-type: luminance如下mask-type: alpha。默认情况下，它是亮度蒙版，因此蒙版图像越接近黑色，它就越透明。
微信截图_20241214194815.png

<svg>
  <defs>
    <!-- 遮罩类型：发光 -->
    <mask id="circle" style="mask-type: luminance">
      <circle cx="100" cy="100" r="80" fill="#fff"></circle>
    </mask>
  </defs>
</svg>

也可以使用 CSS 进行指定，如下所示。

mask {
  mask-type: luminance;
}

对于 CSS 蒙版，mask-mode您可以使用属性选择亮度蒙版/alpha 蒙版，但截至 2021 年，仅支持 Firefox。

总而言之，它看起来像这样：

mask：可以用透明度来表示。有使用蒙版图像的亮度作为透明度的亮度蒙版，以及仅使用透明度的 alpha 蒙版。
剪辑路径：无法透明表达
对于使用透明度的表达式使用蒙版，对于具有清晰轮廓的表达式使用剪辑路径。

CSS 蒙版

覆盖图像

裁剪路径

背景裁剪

SVG遮罩

剪辑路径和蒙版之间的区别

评论 (0)