第十六讲：CSS遮罩
CSS的遮罩技术使用 mask 属性实现对可视元素的裁切，具体实现方式是在元素的mask属性中使用一个图像做遮罩体，该图像透明的部分将遮挡元素对应区域、不透明的部分将呈现元素对应的区域。
这里有两张图片，左边的图片将是 img 标签的 src，右边的图片用做 img 的遮罩体。意思就是，图片实体img元素所呈现的图片将不是原始的，它将被第二张图片以 mask 属性的方式对之进行裁切。
我们先来看默认的遮罩代码和效果：
<style>
.pic1 {
mask: url('https://638183.freep.cn/638183/small/ying.png');
-webkit-mask: url('https://638183.freep.cn/638183/small/ying.png'); /* 兼容Chromium内核 ＜ 120 */
}
</style>
<img class="pic1" src="https://638183.freep.cn/638183/t24/4/lake.jpg" alt="" />
点击查看效果
当代浏览器已经完美支持mask属性，如果考虑兼容性问题可多加一个带 -webkit- 前缀的mask属性，-webkit-mask。上例，mask属性的赋值和background属性的赋值完全一样，我们也完全可以按照背景图像的赋值规范做必要的设置：
<style>
.pic2 {
mask: url('https://638183.freep.cn/638183/small/ying.png') no-repeat center/80% 100%;
-webkit-mask: url('https://638183.freep.cn/638183/small/ying.png') no-repeat center/80% 100%;
}
</style>
<img class="pic2" src="https://638183.freep.cn/638183/t24/4/lake.jpg" alt="" />
点击查看效果
no-repeat 禁止了裁切的重复；center 表示裁切中心在元素的中心，等价于 50% 50% ；80% 100% 是mask的裁切尺寸，注意，使用百分比表达裁切尺寸时该尺寸基于主元素，是主元素宽高的百分之几。
以上我们用的是mask属性的简写形式，repeat对应的是 mask-repeat 、mask-position 和 mask-size ，这与背景相关的 background-* 是一一对应的，稍加思考就可以理解和掌握。mask 属性自身也是简写属性，mask 属性使用图像的对应属性应该是 mask-image ，这与 background 和 background-image 的关系一个道理。mask-* 属性还有很多，有兴趣有余力的童鞋可以去学习研究，我们稍后可能会讲到少数用得上的属性。
以上我们使用带有透明的图片做遮罩体去遮罩另一个画面——我们可以称之为源，可以是图片或其他可视界面。下面我们使用CSS渐变来充当遮罩体（记住，渐变本身就是图像），创建一个径向渐变做遮罩mask的属性值，可视区域设计为70%，为消除椭圆边缘的锯齿，透明色与红色之间有一个小过渡：
<style>
.pic3 {
mask: radial-gradient(red 70%, transparent 70.5%, transparent 0);
-webkit-mask: radial-gradient(red 70%, transparent 70.5%, transparent 0);
}
</style>
<img class="pic3" src="https://638183.freep.cn/638183/t24/4/lake.jpg" alt="" />
点击查看效果
上面的示例是把图像（源）的周边30%裁切掉，我们也可以反过来设计，裁切源图片的中心部分。这次我们下手轻一点，在源图片的中央用mask属性割走一个半径50px的圆，该圆下的源图区域不会显示，源图底下是什么就是什么：
<style>
.pic4 {
mask: radial-gradient(circle, transparent 50px, red 51px, red 0);
-webkit-mask: radial-gradient(circle, transparent 50px, red 51px, red 0);
}
</style>
<img class="pic4" src="https://638183.freep.cn/638183/t24/4/lake.jpg" alt="" />
点击查看效果
我们继续对我们的湖泊这个源图像做其他的遮罩操作。我曾见过一位大佬用十分复杂的方式做一个两边有半圆凹槽的奖券，我们现在也实现湖泊变奖券形状的功能，但代码相当简洁：
<style>
.pic5 {
mask: radial-gradient(circle, transparent 40px, red 42px, red 0) -237px 0 / 100% 100%;
-webkit-mask: radial-gradient(circle, transparent 40px, red 42px, red 0) -237px 0 / 100% 100%;
}
</style>
<img class="pic5" src="https://638183.freep.cn/638183/t24/4/lake.jpg" alt="" />
点击查看效果
设计要点：① 渐变是圆形；② 遮罩渐变背景的 mask-position X轴位置是图像源宽度的一半，使用实体单位长度而非百分比；③ 遮罩渐变尺寸 mask-size XY轴均为100%；④ 允许渐变重复（repeat，默认）。第 ② 个要点基于被遮罩对象即源的宽度，通用性较差，我们可以用如下一了百了的方法加以实现上个示例的功能：
<style>
.pic6 {
mask:
radial-gradient(circle at 0 50%, transparent 40px, red 42px, red 0),
radial-gradient(circle at 100% 50%, transparent 40px, red 42px, red 0);
-webkit-mask:
radial-gradient(circle at 0 50%, transparent 40px, red 42px, red 0),
radial-gradient(circle at 100% 50%, transparent 40px, red 42px, red 0);
-webkit-mask-composite: source-in;
}
</style>
<img class="pic6" src="https://638183.freep.cn/638183/t24/4/lake.jpg" alt="" />
点击查看效果
此法不再关心被遮罩对象的任何尺寸，我们要做的是设计两组径向渐变，令它们所开的凹槽朝向互反，然后用 maks-composite 属性将两个遮罩体组合起来，属性值是 source-in，表示遮罩重叠的位置显示、不重叠的位置不显示。maks-composite属性的资料目前较少，官网也只有英文版且仅介绍少量几个合成值，但合成属性值理论上来源于blend-mode融合技术，新版的chromium内核的浏览器已经完好支持，CANVAS画布图形合成模式演示 一文所提供的资料可做原理性参考。
本讲全部的五个演示例子，都是基于对源进行遮罩裁切的，这也是mask属性的主要功能，但其用途不仅仅局限于此。例如，我们可以用它来做图片融合使两张或更多的图片成为一体，我们甚至可以将视频融入背景图片中。用mask属性将多个单元的内容融合在一起，我此前的一些音画帖做过这方面的尝试，比如《出埃及记》 是图片与视频的融合、《另一个自己》 是图片和图片的融合，使用的技巧都是基于mask属性，感兴趣的童鞋可以去做一下代码层面的研究。
作业：给任意视频做 mask 剪裁，要求在视频的右上角剪去一个小三角形，剪裁边缘不能有锯齿。视频代码和相应的CSS样式如下：
<style>
.vid {
width: 600px;
height: 360px;
object-fit: cover; /* 视频内容适应元素尺寸 */
/* -webkit-mask: ... 这里设计mask属性值 */
}
</style>
<video class="vid" src="视频地址" autoplay loop></video>
返回目录
楼主: 马黑黑
发表于 2024-8-4 12:01
显身卡
发表于 2024-8-4 18:55
楼主
发表于 2024-8-6 20:21