为什么 B 站的弹幕可以不挡人物?

那天在 B 站看视频的时候,偶然发现当字幕遇到人物的时候就被裁切了,不会挡住人物,觉得很神奇,于是决定一探究竟。

高端的效果,往往只需要采用最朴素的实现方式,忙碌了两个小时,陈师傅打开了 F12,豁然开朗。一张图片 + 一个属性,直接搞定。

 

 为了印证我的想法,我决定自己写一个 demo。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.video {width: 668px;height: 376px;position: relative;-webkit-mask-image: url("mask.svg");-webkit-mask-size: 668px 376px;}.bullet {position: absolute;font-size: 20px;}</style>
</head>
<body>
<div class="video"><div class="bullet" style="left: 100px; top: 0;">元芳,你怎么看</div><div class="bullet" style="left: 200px; top: 20px;">你难道就是传说中的奶灵</div><div class="bullet" style="left: 300px; top: 40px;">你好,我是胖灵</div><div class="bullet" style="left: 400px; top: 60px;">这是第一集,还没有舔灵</div>
</div>
</body>
</html>
复制代码

效果是这样的:

 加一个红背景,看得更清楚一些:

 

我们就实现了 B 站同款的不遮挡人物的弹幕。

至于这张图片是怎么来的,肯定是 AI 识别出来然后生成的,一张图片也就一两 K,一次加载很多张也不会造成很大的负担。

最后,来看看这个神奇的 css 属性 mask-image 吧。

这是一个实验中的功能,此功能某些浏览器尚在开发中,在不同的浏览器中适合使用的前缀也不一样。

在开发需求的时候可以把它当成一个亮点使用,但是不能强依赖于这个属性做需求。

这里还有一系列的属性,有兴趣的话可以挨个试一下。

 如果对你有所启发,就点个赞

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/67050.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

酱缸中挣扎的无奈者——(感悟)

——读柏杨《酱缸震荡》随感&#xff08;一&#xff09; 让一些德才兼备的年轻人进入政坛&#xff0c;本应是一件好事&#xff0c;但结果却让老百姓深感失望。其中最主要的原因在于沉淀千年的腐臭不堪的官场文化。换言之&#xff0c;就是大家所强烈呼吁改革的政治体制所造成的…

中国最美的、令人震撼的10大名山

1、黄山—黄山归来不看岳&#xff0c;仿佛穿梭在人间与仙境。 黄山&#xff0c;位于安徽省南部黄山市境内&#xff0c;为三山五岳中三山之一。黄山为道教圣地&#xff0c;遗址遗迹众多&#xff0c;中华十大名山之一&#xff0c;有“天下第一奇山”之美誉。郦道元、李白、徐霞客…

细谈围城---我的启示录

2019独角兽企业重金招聘Python工程师标准>>> 不知什么原因&#xff0c;喜欢《围城》这本书&#xff0c;读<围城>&#xff0c;对于方鸿渐的经历&#xff0c;潜意识里总觉得不真实&#xff0c;总觉得是假的&#xff0c;读到小说的最后了&#xff0c;还是觉得故事…

RxPermissions源码分析

由于在项目中用到了RxPermissions框架&#xff0c;所以想看看源码&#xff0c;顺便记录一下自己对该框架的分析过程。 下面是一篇讲有关Android权限基础知识的文章&#xff0c;有心的小伙伴可以参考。 使用RxPermissions&#xff08;基于RxJava2&#xff09; App module的bui…

围城如社会,故事如生活

生活仍在继续,围城如社会,故事如生活,但我希望:我的社会不是围城,我的生活也不仅是故事。 【第1篇】 那时年少轻狂,喜欢反复翻阅围城,喜欢背诵那些譬喻,喜欢用譬喻来评论某事,喜欢学习钱老在围城里说话的腔调,觉得玩弄文字游戏是最过瘾的事了。后来,看的次数多起来…

任正非 鸿蒙 不为手机而生,为啥华为坚持用安卓,鸿蒙怎么办?任正非:它并不是为手机而生的...

虽说因为禁令的原因&#xff0c;导致华为和谷歌安卓中止部分合作关系&#xff0c;而华为也是推出了鸿蒙系统。可是在双方合作关系之后&#xff0c;华为方面也是表示&#xff0c;自己也将会继续使用安卓系统。这种做法&#xff0c;也是让不少用户有些懵了&#xff0c;为啥华为会…

为什么其他手机厂家不用鸿蒙,手机厂商为什么不用鸿蒙系统?鸿蒙HarmonyOS热议不断...

余承东说&#xff1a;“鸿蒙OS的出发点和Android(安卓)、iOS都不一样&#xff0c;是一款全新的基于微内核的面向全场景的分布式操作系统&#xff0c;能够同时满足全场景流畅体验、架构级可信安全、跨终端无缝协同&#xff0c;以及一次开发多终端部署的要求&#xff0c;鸿蒙应未…

android图标为什么是机器人,安卓图标为什么是个机器人?让鸿蒙来告诉你

大家都知道&#xff0c;安卓是个手机操作系统。目前全球80%的智能手机使用这个操作系统。国产手机都使用这个系统&#xff0c;全球只有苹果iPhone有抗衡安卓的iOS独立系统。但是有多少人了解&#xff0c;为什么安卓操作系统&#xff0c;图标是个小机器人呢&#xff1f; 这得从安…

华为v8升级为鸿蒙,为加速鸿蒙普及,华为要给老手机升级

对于华为来说&#xff0c;在推出鸿蒙系统之后&#xff0c;最关键的就是如何增加使用鸿蒙系统的用户。目前鸿蒙系统只适配在华为以及华为荣耀的手机上&#xff0c;其他手机并不支持。也就是说如果想要尽量提升鸿蒙的普及程度&#xff0c;就要让更多的用户去使用华为手机才行。 但…

你为什么选择计算机应用专业,致新生!我为什么选择信息工程系

原标题&#xff1a;致新生&#xff01;我为什么选择信息工程系 度过长长的盛夏 站在人生新的路口 满怀对未来的期待 还有各种炽热的梦想 你是否有了坚定的方向 或许你急于了解专业的新鲜 或许你好奇学校的无限可能 又或许你还有些彷徨和迷茫 没关系 那就来听听他们 与济南理工相…

【IT资讯】继哈工大Matlab软件被美禁用后,华为、360再遭Docker软件禁令

众所周知&#xff0c;6月中旬&#xff0c;哈工大、哈工程受美商务部「实体名单」影响&#xff0c;被禁止使用 MATLAB 商业软件&#xff0c;这一消息迅速成为了人们关注的热点。 MATLAB对于现在的工科生来说是必不可少的工具&#xff0c;其日常使用率仅次于 Office 。如果 MATL…

科学家用ChatGPT写完1篇论文仅用1小时!多所高校撤销禁令

自2022年11月发布以来&#xff0c;许多人都在使用ChatGPT来帮助他们完成工作&#xff0c;各行各业的人都在使用&#xff0c;从撰写营销材料&#xff0c;到起草电子邮件&#xff0c;再到生成报告。 ChatGPT作为一种人工智能工具&#xff0c;在科研中也显示非常大的应用潜力&…

干货!拥抱大模型,探寻新时代的科研范式

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入&#xff01; 随着ChatGPT、SAM为代表的大规模预训练模型的横空出世&#xff0c;对于人工智能、自然语言处理、计算机视觉以及软件开发等领域都带来了巨大的影响。2023年4月12日&#xff0c;AI TIME与上海交通大学人工智能研…

Python开源项目周排行 2023年第12周

原文地址&#xff1a;https://www.python1989.com/github-python-weekly/202312/ #2023年第12周2023年4月8日1Public APIs一个通过 MaShape 市场整合的世界上最全的 API 接口目录&#xff0c;支持关键词搜索和添加 API 数据&#xff0c;方便开发者快速的找到自己想要的 API。2A…

BI界的ChatGPT,它有什么厉害之处

​ChatGPT火了&#xff0c;注册用户从0到1亿&#xff0c;仅用了2个月时间。ChatGPT的背后是大数据、大模型、大算力&#xff0c;是AI的能力集中化的典型场景。那么在BI界&#xff0c;是否也有一款像ChatGPT一样智能BI软件&#xff0c;只要告诉它我们想看啥数据&#xff0c;它噔…

Finetuner+:为企业实现大模型微调和私有化部署

如 ChatGPT、GPT4 这样的大型语言模型就像是你为公司请的一个牛人顾问&#xff0c;他在 OpenAI、Google 等大公司被预训练了不少的行业内专业知识&#xff0c;所以加入你的公司后&#xff0c;你只需要输入 Prompt 给他&#xff0c; 介绍一些业务上的背景知识&#xff0c;他就能…

Sealos 私有化部署完全指南

Sealos 用了五年的时间从一个 K8s 一键安装工具蜕变成了一个真正的云操作系统&#xff0c;将产品体验提升到了极致&#xff0c;也收获了 10w 的社区用户。 一个多月前&#xff0c;Sealos 正式发布了公有云托管版本&#xff0c;社区用户狂喜&#xff0c;纷纷寻找私有化部署教程…

带你搞懂人工智能、机器学习和深度学习!

不少高校的小伙伴找我聊入门人工智能该怎么起步&#xff0c;如何快速入门&#xff0c;多长时间能成长为中高级工程师&#xff08;聊下来感觉大多数学生党就是焦虑&#xff0c;毕业即失业&#xff0c;尤其现在就业环境这么差&#xff09;&#xff0c;但聊到最后&#xff0c;很多…

AI 工具合辑盘点(十一)持续更新 之 AI 学术研究工具

许多学生和研究人员已经在利用人工智能进行研究。它可以让你更容易地了解最新研究成果&#xff0c;并帮助你组织和正确引用你最喜爱的研究论文。 从生成长篇研究论文摘要到通知你领域内的新趋势&#xff0c;研究中的AI工具节省了大量时间和精力。如果你在学术界&#xff0c;那…

一款全新的基于GPT4的Python神器,关键还免费

chartgpt大火之后&#xff0c;随之而来的就是一大类衍生物了。 然后&#xff0c;今天要给大家介绍的是一款基于GPT4的新一代辅助编程神器——Cursor。 它最值得介绍的地方在于它免费&#xff0c;我们可以直接利用它来辅助我们编程&#xff0c;真正做到事半功倍。 注意&#…