弹幕防遮挡人像功能探索-提升观影体验

防遮挡人像功能

近期在追剧的时候。看到弹幕当中的文字从人物下方穿过，没有影响盖在人物身上。观影效果得到了巨大的提升，感觉非常神奇。

作为一个曾经的开发工程师。对于这种效果的实现十分好奇。不禁感慨现在技术发展如此迅猛，之前看不到的效果，现在许多都已经能够实现了。 

实现方案

那么这种效果到底是如何来做的呢？通过对一番度年谷歌必应，找到了对应的实现方式。

高端的食材往往只需要简单的烹饪方式。

 这个防遮挡人像的实现效果实现上也非常的简单。使用了一张人物轮廓的图片加一个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大小。在兼容性允许的情况下，可以为网站页面带来进一步分瘦身。