如何用CSS实现图片蒙版与遮罩效果

要实现图片的蒙版与遮罩效果，CSS 提供了强大的工具，如 clip-path、mask-image 和伪元素等。通过这些技术，可以创造出丰富的视觉效果，例如圆形剪裁、渐变遮罩或文字镂空效果。

以下将详细介绍如何用 CSS 实现图片的蒙版与遮罩效果，并提供具体的代码示例和扩展讨论。

1. 使用 clip-path 实现图片剪裁

clip-path 是一种用于定义可见区域的属性，可以通过它来创建各种形状的遮罩效果。比如，我们可以将图片裁剪为圆形、椭圆形或多边形。

示例：将图片裁剪为圆形

<div class="clip-circle">
  <img src="example.jpg" alt="示例图片">
</div>

.clip-circle img {
  clip-path: circle(50%); /* 将图片裁剪为圆形 */
  width: 200px;
  height: 200px;
  object-fit: cover; /* 确保图片填充整个容器 */
}

扩展：多边形剪裁

如果需要更复杂的形状，可以使用 polygon() 函数。

.clip-polygon img {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  width: 200px;
  height: 200px;
  object-fit: cover;
}

上面的代码会将图片裁剪为一个三角形。

2. 使用 mask-image 实现图片蒙版

mask-image 是 CSS 的蒙版功能，允许我们使用图片作为遮罩层。结合渐变色或透明度，可以制作出更高级的效果。

示例：渐变蒙版

<div class="mask-gradient">
  <img src="example.jpg" alt="示例图片">
</div>

.mask-gradient img {
  mask-image: linear-gradient(to bottom, transparent, black);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black); /* 兼容性 */
  width: 300px;
  height: 200px;
  object-fit: cover;
}

在上面的例子中，图片从顶部开始逐渐变得透明，底部完全显示黑色。

示例：文字镂空效果

我们还可以结合 mask-image 和 SVG 来实现文字镂空效果。

<div class="text-mask">
  <img src="example.jpg" alt="示例图片">
</div>

.text-mask img {
  mask-image: url('text-mask.svg'); /* 使用 SVG 定义的文字蒙版 */
  -webkit-mask-image: url('text-mask.svg');
  width: 300px;
  height: 200px;
  object-fit: cover;
}

SVG 文件（text-mask.svg）内容如下：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <text x="50" y="120" font-size="80" fill="white">TEXT</text>
</svg>

3. 使用伪元素实现遮罩效果

伪元素（:before 或 :after）可以用来叠加一层颜色或图案，从而实现遮罩效果。

示例：叠加半透明遮罩

<div class="overlay-effect">
  <img src="example.jpg" alt="示例图片">
</div>

.overlay-effect {
  position: relative;
  display: inline-block;
}

.overlay-effect img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

.overlay-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
  z-index: 1;
}

在这个例子中，伪元素 ::after 被用来覆盖在图片上，形成一种半透明的遮罩效果。

4. 动态效果与交互

为了增加用户体验，可以结合 CSS 动画或过渡效果来增强遮罩和蒙版的表现力。

示例：鼠标悬停时显示遮罩

.overlay-effect:hover::after {
  background: rgba(255, 0, 0, 0.5); /* 鼠标悬停时变为红色 */
  transition: background 0.3s ease; /* 添加平滑过渡 */
}

总结

• clip-path：适合用于几何形状的剪裁，如圆形、多边形等。
• mask-image：适合复杂的蒙版需求，如渐变遮罩或文字镂空。
• 伪元素：适合简单的叠加效果，如颜色遮罩或图案叠加。

根据具体需求选择合适的技术，能够创造出丰富多样的视觉效果。