如何实现B站弹幕隐于人后功能？

原理与实现:

原理:CSS3的mask-image属性(遮罩属性)

mask-image:url();

值为图片的url，该属性的作用是将一张含有透明部分的图片，该图片的非透明部分不显示，透明部分置于dom元素前，成为遮罩。显示的是背景颜色而不是原图片的不透明部分。

实现：

1.模拟弹幕情况

<div class="video" style="width: 1920px; height: 1000px; position: relative;"><p class="top one">这是第一句sentence</p><p class="top two" >这是第二句sentence</p><p class="top three">这是第三句sentence</p>

.top {font-size: 30px;top: 200px;position: absolute;
}
.one{right: 200px;
}
.two{right: 500px;top: 300px;
}
.three{right: 950px;
}

2.覆盖遮罩图片

使用一张含透明图片,为p所在的父元素添加样式

.video{-webkit-mask-image: url('background.png');-webkit-mask-size: 1900px 900px;background-color: brown;
}

效果如下(设置了背景颜色为红棕色)

PS:

我们能看到，在css中我不是用的mask-image，而是-webkit-mask-image,那是因为浏览器的用户代理UA为：

User-Agent:

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36 SLBrowser/8.0.0.7271 SLBChan/103

内核是Chrome和Safari，需要加上-webkit-前缀进行适应。

如何实现B站弹幕隐于人后功能？相关推荐

用Python爬取b站弹幕，看大家还会接受《爱情公寓5》吗？
尽管抄袭傍身,也没能阻挡<爱情公寓5>进击的脚步. 最近爱情公寓电视剧微博发布了长达8分钟的揭幕视频,官宣新季将在2020正式开播. 几位主演纷纷转发宣传,将#爱情公寓5揭幕#的话题送上了 ...
php弹幕反检测,【原理讲解附源码】找到B站弹幕的发送者
本帖最后由厄斐琉斯于 2020-7-31 23:19 编辑特别鸣谢:感谢Hatsune_miku前辈在github上开源的部分源码声明:任何人不得将其用于任何商业目的,否则后果自负! 前言:之 ...
b站弹幕 so文件解析/逆序列化
写在前面: 下文全部使用**代替b 站,由于csdn现在版权的问题,本文只介绍对so文件的逆序列化(反正怎么获取文件网上很多文章) 如图,抓包得到的是乱码,实际上这不是加密,是使用protobuf序列 ...
B站弹幕姬,弹幕礼物感谢,关注感谢,自动回复,房管工具,房管助手,基于java
运行环境可在所有主要操作系统上运行,并且仅需要安装Java JDK或JRE版本8或更高版本.要检查,请运行java -version: $ java -version java version &q ...
关于《后浪》的B站弹幕分析总结（四）——Python实现LDA内容主题挖掘及主题可视化
目录一.使用sklearn里面的LatentDirichletAllocation做主题挖掘二.使用gensim的ldamodel做主题挖掘三.如何将结果可视化四.如何确定主题数 4.1 观察 ...
bilibili服务器维护7月,GitHub - thestarweb/bilibilidan: 一个B站弹幕姬，就是不会在第一时间维护。。支持插件！！...
这个项目最最直接的作用是供作者本人使用,随便开源以便让大家知道如何让弹幕姬工作尽管有发行的想法,但是因为时间等原因,不一定及时维护,甚至作为作者都没有第一时间发现弹幕姬已经坏了. 作者本身水平也有限 ...
爬虫----b站弹幕
爬取B站弹幕数据的API:https://api.bilibili.com/x/v1/dm/list.so?oid=XXX 方法一:获取oid 我们要想知道这个oid是什么,首先要获取到cid.弹幕数 ...
你在B站弹幕玩过哪些梗？
B站现为中国最大实时弹幕视频直播网站.中国年轻世代高度聚集的文化社区和视频平台.对于B站和B站的用户来说,弹幕是对内容的一种参与.高用户对B站的高黏性,也有弹幕的一份功劳. B站作为专业的弹幕视频网站 ...
python-正则表达式及应用(b站弹幕屏蔽)
目录简介正则表达式常用字符定位符元字符修饰符字符组重复限定符 re模块手机号判断昵称判断 b站弹幕礼仪 b站弹幕屏蔽正则长弹幕个人信息手机号 QQ号日期无意义现场怪视频 ...

如何实现B站弹幕隐于人后功能？

原理与实现:

如何实现B站弹幕隐于人后功能？相关推荐

最新文章

热门文章