跳到主要内容

CSS 遮罩

CSS遮罩（Masking）是一种强大的技术，允许你通过定义遮罩层来控制元素的可见区域。通过遮罩，你可以创建复杂的视觉效果，例如渐变遮罩、图像遮罩等。本文将带你逐步了解CSS遮罩的基本概念、语法以及实际应用。

什么是CSS遮罩？​

CSS遮罩是一种通过定义遮罩层来控制元素可见区域的技术。遮罩层可以是图像、渐变或SVG图形。遮罩的工作原理是：遮罩层中的透明区域会隐藏元素的内容，而不透明区域则会显示元素的内容。

提示

遮罩与裁剪（Clipping）不同。裁剪是通过定义路径来裁剪元素的可见区域，而遮罩是通过遮罩层的透明度来控制元素的可见区域。

基本语法​

CSS遮罩主要通过 mask 属性来实现。mask 属性可以接受多种类型的值，包括图像、渐变和SVG图形。

css
.element {
  mask: url('mask.png');
}

使用图像作为遮罩​

你可以使用图像作为遮罩层。图像中的透明区域会隐藏元素的内容，而不透明区域则会显示元素的内容。

css
.element {
  mask: url('mask.png');
  -webkit-mask: url('mask.png'); /* 兼容性处理 */
}

使用渐变作为遮罩​

你也可以使用CSS渐变作为遮罩层。渐变中的透明区域会隐藏元素的内容，而不透明区域则会显示元素的内容。

css
.element {
  mask: linear-gradient(to bottom, transparent, black);
  -webkit-mask: linear-gradient(to bottom, transparent, black); /* 兼容性处理 */
}

使用SVG作为遮罩​

SVG图形也可以作为遮罩层。SVG中的透明区域会隐藏元素的内容，而不透明区域则会显示元素的内容。

html
<svg width="0" height="0">
  <mask id="svg-mask">
    <rect width="100%" height="100%" fill="white" />
    <circle cx="50%" cy="50%" r="50" fill="black" />
  </mask>
</svg>

<div class="element"></div>
css
.element {
  mask: url(#svg-mask);
  -webkit-mask: url(#svg-mask); /* 兼容性处理 */
}

实际应用场景​

1. 图片遮罩效果​

通过使用图像作为遮罩层，你可以为图片添加复杂的遮罩效果。例如，你可以使用一个带有透明区域的PNG图像作为遮罩，来创建一个不规则的图片显示效果。

css
.image {
  mask: url('irregular-mask.png');
  -webkit-mask: url('irregular-mask.png'); /* 兼容性处理 */
}

2. 渐变遮罩效果​

渐变遮罩可以用来创建渐隐效果。例如，你可以使用一个从透明到黑色的渐变遮罩，来创建一个从顶部到底部逐渐消失的效果。

css
.element {
  mask: linear-gradient(to bottom, transparent, black);
  -webkit-mask: linear-gradient(to bottom, transparent, black); /* 兼容性处理 */
}

3. SVG遮罩效果​

SVG遮罩可以用来创建复杂的形状遮罩。例如，你可以使用一个SVG图形作为遮罩，来创建一个圆形遮罩效果。

html
<svg width="0" height="0">
  <mask id="circle-mask">
    <rect width="100%" height="100%" fill="white" />
    <circle cx="50%" cy="50%" r="50" fill="black" />
  </mask>
</svg>

<div class="element"></div>
css
.element {
  mask: url(#circle-mask);
  -webkit-mask: url(#circle-mask); /* 兼容性处理 */
}

总结​

CSS遮罩是一种强大的技术，允许你通过定义遮罩层来控制元素的可见区域。通过使用图像、渐变或SVG图形作为遮罩层，你可以创建复杂的视觉效果。本文介绍了CSS遮罩的基本概念、语法以及实际应用场景，希望对你有所帮助。

附加资源与练习​