图片弹幕蒙版java实现_通过css3实现蒙版弹幕

最近在b站上看到一种弹幕效果叫做智能防挡弹幕&＃xff0c;也就是传说中的蒙版弹幕&＃xff0c; 打开之后效果大概是这样的

再也不用担心男神女神的绝世容颜被花里胡哨的弹幕挡住啦&＃xff0c;是不是感觉很神奇。

实现原理其实就是类似于ps的蒙版&＃xff0c;也就是说将图像的一部分 “隐藏”。这里我们需要用到的是css3的mask遮罩属性。

CSS mask

CSS mask遮罩属性的历史非常久远了&＃xff0c;远到比CSS3 border-radius等属性还要久远&＃xff0c;最早是出现在Safari浏览器上的&＃xff0c;差不多可以追溯到09年。但是那个时候还是ie的天下&＃xff0c;考虑到兼容性&＃xff0c;所有没有被推广起来。不过现在&＃xff0c;ie已经是过去式了&＃xff0c;所以可以放心使用了。

使用起来也比较简单

css代码如下&＃xff1a;

.mask-image{width:250px;height:187.5px;-webkit-mask-image:url(mask.png);mask-image:url(mask.png);

}

蒙板可以是 CSS3 渐变或者半透明的PNG图片&＃xff0c;蒙板元素的alpha值为0的时候会覆盖下面的元素&＃xff0c;为1的时候会完全显示下面的内容。效果大概是这样&＃xff1a;

好了&＃xff0c;有了这个属性我们就可以愉快的实现蒙版弹幕了

首先&＃xff0c;需要一张底图&＃xff0c;模拟为视频的某一帧的图片

然后我们需要一个蒙版&＃xff0c;遮住背景中的人物

显示代码如下&＃xff1a;

html部分&＃xff1a;