CSS 蒙版 - mask

你好，未来的 CSS 大师们！今天，我们将深入探讨 CSS 蒙版这个迷人的世界。想象你是一位魔术师，想要让网页的一部分消失或者以有趣的方式展示出来。这正是 CSS 蒙版允许我们做到的！所以，让我们戴上魔术师的帽子，学习一些 CSS 技巧吧！

什么是 CSS 蒙版？

CSS 蒙版就像在你的网页元素上使用一个不可见的模板。它允许你根据另一个图像或形状来隐藏或部分显示元素的一部分。这是一种强大的技术，可以创造出一些非常酷的效果！

可用的值

在我们开始编码之前，让我们看看我们可以与 mask 属性一起使用的不同值。将这些值视为不同类型的魔法棒，每个都能创造独特的效果：

值	描述
none	不应用蒙版
<mask-reference>	指向一个蒙版图像
<masking-mode>	决定如何应用蒙版
<position>	设置蒙版的位置
<bg-size>	定义蒙版的大小
<repeat-style>	指定蒙版如何重复
<geometry-box>	定义蒙版框
no-clip	防止裁剪蒙版

如果现在这些看起来令人困惑，不用担心。我们会通过示例来探索每一个！

应用范围

mask 属性可以应用于任何元素。就像拥有一根在所有东西上都能起作用的魔法棒！

语法

mask 属性的基本语法如下：

.element {
mask: <value>;
}

现在，让我们详细看看每个值。

CSS mask - none 值

none 值很简单。它意味着不应用任何蒙版。就像决定完全不使用你的魔法棒。

.no-mask {
mask: none;
}

这段代码告诉浏览器，“不要对这个元素应用任何蒙版。”

CSS mask - <mask-reference>

这里才是真正的魔法开始！<mask-reference> 可以是一个图像或 CSS 渐变，它定义了元素的哪些部分应该可见。

.image-mask {
mask-image: url('mask.png');
mask: url('mask.png');
}

.gradient-mask {
mask-image: linear-gradient(to right, transparent, black);
mask: linear-gradient(to right, transparent, black);
}

在这些示例中，我们使用了一个图像文件 ('mask.png') 或线性渐变作为我们的蒙版。蒙版中的黑色部分将显示元素，而透明部分将隐藏它。

CSS mask - <masking-mode>

蒙版模式决定了如何应用蒙版。有两个值：alpha 和 luminance。

.alpha-mask {
mask-mode: alpha;
}

.luminance-mask {
mask-mode: luminance;
}

• alpha：使用蒙版图像的 alpha 通道。
• luminance：使用蒙版图像的亮度。

CSS mask - <position>

就像背景图像一样，你可以定位你的蒙版：

.positioned-mask {
mask-position: center;
/* 或者 */
mask: url('mask.png') center;
}

这会将蒙版居中在元素上。你可以在这里使用任何有效的 CSS 位置值。

CSS mask - <bg-size>

你也可以控制蒙版的大小：

.sized-mask {
mask-size: cover;
/* 或者 */
mask: url('mask.png') cover;
}

这将使蒙版覆盖整个元素。你也可以使用具体的尺寸，比如 100px 200px。

CSS mask - <repeat-style>

如果蒙版比元素小，你可以控制它如何重复：

.repeating-mask {
mask-repeat: repeat-x;
/* 或者 */
mask: url('mask.png') repeat-x;
}

这将使蒙版在元素上水平重复。

CSS mask - <geometry-box>

几何框定义了蒙版覆盖的区域：

.box-mask {
mask-clip: padding-box;
/* 或者 */
mask: url('mask.png') padding-box;
}

这将使蒙版应用于元素的填充框。

CSS mask - <geometry-box> | no-clip

no-clip 值防止蒙版被裁剪到元素的边界：

.no-clip-mask {
mask-clip: no-clip;
/* 或者 */
mask: url('mask.png') no-clip;
}

这允许蒙版延伸到元素边界之外。

CSS mask - 相关属性

还有一些与 mask 相关的属性，它们给你更多的控制：

属性	描述
mask-image	指定蒙版图像
mask-mode	设置蒙版模式
mask-repeat	控制蒙版如何重复
mask-position	设置蒙版的位置
mask-clip	决定蒙版的绘制区域
mask-origin	设置蒙版的原点
mask-size	指定蒙版的大小
mask-composite	定义蒙版如何组合

这些属性每一个都对应于我们一直在使用的简写 mask 属性的一部分。

就这样，我的年轻的 CSS 巫师们！你们刚刚学习了 CSS 蒙版的基础。记住，就像任何魔术技巧一样，掌握 CSS 蒙版需要练习。所以不要害怕实验，创造你们自己的神奇网页设计！

在我多年的教学经验中，我发现最好的学习方法是实践。所以这里有一个有趣的练习：尝试使用渐变蒙版在图像上创建一个“揭示”效果。使得当你悬停在图像上时，它完全显示出来。就像拉开窗帘展示隐藏的图片！

快乐编码，愿你的蒙版总是完美贴合！

Credits: Image by storyset