跳到主要内容

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遮罩的基本概念、语法以及实际应用场景,希望对你有所帮助。

附加资源与练习