效果：mask-image 哔哩哔哩弹幕不遮挡人物

一、展示

二、解析

哔哩哔哩观看视频，能看到弹幕不会遮挡人物，用户体验非常好。
原理：mask-image引入svg图片 -webkit-mask-image: url("")。
CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。本文内容mask区域为被隐藏的区域，失效效果为隐藏了人物区域的弹幕。
“mask-svg”图片怎么来的，应该是AI识别视频内容生成的。
梳理：AI识别视频内容，不断的生成mask-svg图片给到视频区域，从而实现弹幕不遮挡人物。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask-image

三、实现 mask-image.vue

<template><div class="container"><span>mask-image</span><div class="video"><div class="bullet" style="left: 50px; top: 20px;">我的弹幕1</div><div class="bullet" style="left: 200px; top: 40px;">我的弹幕2</div><div class="bullet" style="left: 400px; top: 60px;">我的弹幕3</div><div class="bullet" style="left: 50px; top: 80px;">我的弹幕4</div><div class="bullet" style="left: 200px; top: 100px;">我的弹幕5</div><div class="bullet" style="left: 400px; top: 120px;">我的弹幕6</div></div></div></template><script setup lang="ts"></script><style scoped lang="less">.video {width: 668px;height: 376px;position: relative;-webkit-mask-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0) 0.0332447%, rgba(0, 0, 0, 0) 0.0332447%), linear-gradient(rgba(0, 0, 0, 0) 99.9668%, rgb(0, 0, 0) 99.9668%, rgb(0, 0, 0)), url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKIHdpZHRoPSI2NjhweCIgc3R5bGU9InRyYW5zZm9ybTpzY2FsZSgxLDEuMDAxKTsiIGhlaWdodD0iMzc1Ljc1cHgiIHZpZXdCb3g9IjAgMCAzMjAuMDAwMDAwIDE4MC4wMDAwMDAiCiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4KPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsMTgwLjAwMDAwMCkgc2NhbGUoMC4xMDAwMDAsLTAuMTAwMDAwKSIKZmlsbD0iIzAwMDAwMCIgc3Ryb2tlPSJub25lIj4KPHBhdGggZD0iTTAgMTEyNSBsMCAtNjc1IDI4IDAgYzI2IDAgMzAgNSA1MSA3NyAzNSAxMTcgNTcgMTYxIDEwMSAyMDQgbDQwIDQwIDExNyAtMwpjMTA1IC0zIDEzMCAwIDIyMSAyNiAxMTcgMzMgMTE3IDMyIDgwIDEzMSAtMjEgNTUgLTIzIDc2IC0yMyAyNzUgMCAxOTggMiAyMjEKMjQgMjg4IDI3IDg0IDc1IDE3NiAxMDAgMTk0IDIzIDE2IDUxIDcxIDUxIDk4IDAgMjAgLTMgMjAgLTM5NSAyMCBsLTM5NSAwIDAKLTY3NXoiLz4KPHBhdGggZD0iTTEzNDAgMTc4MCBjMCAtMTEgMTYgLTM1IDM2IC01MiA0MiAtMzcgMTA3IC0xMzAgMTMzIC0xOTEgNDggLTExMSA2NCAtMTk3IDY1Ci0zNDIgMCAtMTM1IC0yMiAtMjkwIC01NCAtMzc1IC02IC0xNCAtMTEgLTQ3IC0xMiAtNzMgLTEgLTM4IDMgLTUxIDIwIC02MiA0NAotMzEgNTcgLTk2IDU1IC0yNzIgLTEgLTEzNiAxIC0xNjEgMTMgLTE1NiA4IDMgMTQgMCAxNCAtNyAwIC03IDggLTEwIDE5IC03CjEyIDMgMjEgLTEgMjQgLTEyIDMgLTkgOCAtMjQgMTIgLTMzIDUgLTEzIDAgLTIwIC0yMCAtMjggLTI2IC0xMCAtMjcgLTEzIC0yMQotNjMgMyAtMjggNiAtNjIgNiAtNzUgbDAgLTIyIDc4NSAwIDc4NSAwIDAgODk1IDAgODk1IC05MzAgMCBjLTkyOCAwIC05MzAgMAotOTMwIC0yMHoiLz4KPC9nPgo8L3N2Zz4K");-webkit-mask-size: 800px 450px;background-color: #ff0000;}.bullet {position: absolute;font-size: 20px;}</style>

四、mask-image语法

/* Keyword value */
mask-image: none;/* <mask-source> value */
mask-image: url(masks.svg#mask1);/* <image> values */
mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
mask-image: image(url(mask.png), skyblue);/* Multiple values */
mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent);/* Global values */
mask-image: inherit;
mask-image: initial;
mask-image: unset;

五、欢迎交流指正，关注我，一起学习。

参考链接：

mask-image - CSS（层叠样式表） | MDN

效果：mask-image 哔哩哔哩弹幕不遮挡人物相关推荐

弹幕不遮挡人物效果实现
在 B 站看视频的时候发现当字幕遇到人物的时候就被裁切了,不会挡住人物,觉得很神奇. 实现方式(一张图片+一个属性,搞定) 一行css代码: mask-image: url(img/head.png) ...
为什么B站中的弹幕可以不遮挡人物
上班逛B站时摸鱼时,看到了满屏的弹幕,而且还不挡脸,突然心血来潮来看看它是怎么实现的? 不难发现弹幕其实它就是有一个蒙版层div,遮挡在视频组件的上方,z-index层级设置的比较高(这里是11),v ...
Python哔哩哔哩弹幕爬取+词云生成
心血来潮,研究下词云,先上图,最终效果代码 import numpy as np import requests from bs4 import BeautifulSoup from wordclo ...
Python_哔哩哔哩弹幕可视化
目录 B站弹幕API接口源码如下运行效果如图讲解视频:哔哩哔哩可视化弹幕 B站弹幕API接口 B站弹幕API接口为:https://api.bilibili.com/x/v1/dm/list.s ...
清除string内容_python爬取哔哩哔哩网页弹幕内容,并将爬取的内容以五角星的形式显示出来...
转载:03 爬虫实例-获取网页弹幕内容思路: 向哔哩哔哩网站发送请求请求成功后,解析爬取的弹幕内容保存到一个文件中读取文件并分析弹幕内容中词组或文字出现的频率将这些词组或文字组成五角星图形组 ...
python爬取哔哩哔哩网页弹幕内容,并将爬取的内容以五角星的形式显示出来
思路: 向哔哩哔哩网站发送请求请求成功后,解析爬取的弹幕内容保存到一个文件中读取文件并分析弹幕内容中词组或文字出现的频率将这些词组或文字组成五角星图形组成五角星图形后,以图片的形式输出使用到 ...
爬取哔哩哔哩弹幕制作词云
爬取哔哩哔哩的弹幕,http://comment.bilibili.com/6315651.xml 需要知道cid,可以F12,F5刷新,找cid,找到之后拼接url 也可以写代码,解析respons ...
本地播放哔哩哔哩弹幕+视频
本地播放哔哩哔哩弹幕+视频 1.打开你喜欢或者收藏的视频播放页面 2.下载视频方法1:一劳永逸的下载工具: IDM 方法2:利用浏览器插件的嗅探[^1]工具(不太推荐,感兴趣的可以百度学习一下) 方 ...
哔哩哔哩弹幕网站大数据分析研究背景
哔哩哔哩(Bilibili)是一个普遍受欢迎的弹幕视频网站,它汇集了大量的用户生成内容,包括视频.评论.弹幕等.因此,对哔哩哔哩上的数据进行分析,有助于了解网络文化.用户行为和消费习惯等方面的信息.此 ...

效果：mask-image 哔哩哔哩弹幕不遮挡人物

效果：mask-image 哔哩哔哩弹幕不遮挡人物相关推荐

最新文章

热门文章