防遮挡人像功能
近期在追剧的时候。看到弹幕当中的文字从人物下方穿过，没有影响盖在人物身上。观影效果得到了巨大的提升，感觉非常神奇。
作为一个曾经的开发工程师。对于这种效果的实现十分好奇。不禁感慨现在技术发展如此迅猛，之前看不到的效果，现在许多都已经能够实现了。
实现方案
那么这种效果到底是如何来做的呢？通过对一番度年谷歌必应，找到了对应的实现方式。
高端的食材往往只需要简单的烹饪方式。
这个防遮挡人像的实现效果实现上也非常的简单。使用了一张人物轮廓的图片加一个CSS属性即可搞定这个问题。
人物模板
首先做一个人物镂空的模板：
核心代码
加一个 CSS 的属性，mask image属性，对整个效果进行了渲染。
-webkit-mask-image代码介绍
Mask
CSS中的mask属性允许用户屏蔽或剪裁特定点的图像来实现，部分或完全隐藏某个元素的可见性
以下是该样式的介绍:
Mask-image
mask-image CSS 属性设置了用作元素蒙版层的图像。默认情况下，这意味着蒙版图像的 alpha 通道将与元素的 alpha 通道相乘。可以使用 mask-mode 属性对此进行控制。
/* 关键字值 */
mask-image: none;
/* <mask-source> 值 */
mask-image: url(masks.svg#mask1);
/* <image> 值 */
mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
mask-image: image(url(mask.png), skyblue);
/* 多个属性值 */
mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1), transparent);
/* 全局属性值 */
mask-image: inherit;
mask-image: initial;
mask-image: revert;
mask-image: revert-layer;
mask-image: unset;
示例介绍
Mask属性可以做一个渐变遮罩。也可以做图片的遮罩。
具体的属性可以参见下面的示例，当中与图片重叠的部分会显示，透明的部分则会被隐藏。嗯……官方文档介绍的比较绕口，我就画蛇添足了部分代码，补充了官方示例。
兼容性情况
在网站的开发过程当中，我们可以将它作为一个亮点来使用。但是这个属性，因为涉及到兼容性和普及性的问题，并不能做成一个强依赖的情况。
其他属性
mask 他还有一些其他的属性，有兴趣的可以进行一下尝试。
/* Keyword values */
mask: none;
/* Image values */
mask: url(mask.png); /* 使用位图来做遮罩 */
mask: url(masks.svg#star); /* 使用 SVG 图形中的形状来做遮罩 */
/* Combined values */
mask: url(masks.svg#star) luminance; /* Element within SVG graphic used as luminance mask */
mask: url(masks.svg#star) 40px 20px; /* 使用 SVG 图形中的形状来做遮罩并设定它的位置：离上边缘 40px，离左边缘 20px */
mask: url(masks.svg#star) 0 0/50px 50px; /* 使用 SVG 图形中的形状来做遮罩并设定它的位置和大小：长宽都是 50px */
mask: url(masks.svg#star) repeat-x; /* Element within SVG graphic used as horizontally repeated mask */
mask: url(masks.svg#star) stroke-box; /* Element within SVG graphic used as mask extending to the box enclosed by the stroke */
mask: url(masks.svg#star) exclude; /* Element within SVG graphic used as mask and combined with background using non-overlapping parts */
/* Global values */
mask: inherit;
mask: initial;
mask: unset;
其他 mas 信息可查阅 mask - CSS：层叠样式表 | MDN
跨域问题
另外遮罩图片不可以跨越，否则无法。完成效果。但可以使用base 64格式图片解决跨域问题。
扩展使用
MASK属性并不仅仅可以用来做图片的效果合成。
也可以对无法压缩的PNG图片进行进一步的优化。 通过将PNG图片转换成JPG有损格式的压缩图片体积会大幅降低。
对于原先PNG当中应该使用透明部分的呃位置可以通过制作一个透明的PNG模板采用Max属性来进行两者的叠加从而大幅减少原先。原图的PNG大小。在兼容性允许的情况下，可以为网站页面带来进一步分瘦身。