来源 |
掘金 做者 |
来源 |
掘金 做者 |
那天在 B 站看视频的时候，偶尔发现当字幕碰到人物的时候就被裁切了，不会盖住人物，觉得很奇异，于是决定一探事实。
高端的效果，往往只需要接纳最朴实的实现体例，繁忙了两个小时，陈师傅翻开了 F12，名顿开。一张图片 + 一个属性，间接搞定。
为了印证我的设法，我决定本身写一个 demo。
<!DOCTYPE html>
< htmllang= "en">
展开全文
< head>
< metacharset= "UTF-8">
< title> Title </ title>
< style>
.video{
width: 668px;
height: 376px;
position: relative;
-webkit-mask-image: url( "mask.svg");
-webkit-mask-size: 668px376px;
.bullet{
position: absolute;
font-size: 20px;
</ style>
</ head>
< body>
< divclass= "video">
< divclass= "bullet"style= "left: 100px; top: 0;"> 元芳，你怎么看 </ div>
< divclass= "bullet"style= "left: 200px; top: 20px;"> 你莫非就是传说中的奶灵 </ div>
< divclass= "bullet"style= "left: 300px; top: 40px;"> 你好，我是胖灵 </ div>
< divclass= "bullet"style= "left: 400px; top: 60px;"> 那是第一集，还没有舔灵 </ div>
</ div>
</ body>
</ html>
复造代码
效果是如许的：
加一个红布景，看得更清晰一些：
至此，我们就实现了 B 站同款的不遮挡人物的弹幕。
最初，来看看那个奇异的 css 属性 mask-image 吧 ：。
那是一个尝试中的功用，此功用某些阅读器尚在开发中，在差别的阅读器中合适利用的前缀也纷歧样。
在开发需求的时候能够把它当成一个亮点利用，但是不克不及强依赖于那个属性做需求。
那里还有一系列的属性，有兴趣的话能够挨个试一下。
最初给各人谋一些福利，包邮送书6本，都是不错的好书，尤其是"流利的Python"豆瓣9.4分，有兴趣的同窗能够来试一下手气。
包邮送出6本，需要的同窗能够在 下面的公家号"Python编程喜好者"，后台 输入：6本书，即可参与。
入门: 最全的零根底学Python的问题 | 零根底学了8个月的Python |实战项目 | 学Python就是那条捷径
干货:爬取豆瓣短评，片子《后来的我们》 | 38年NBA更佳球员阐发 |从万寡等待到口碑扑街！唐探3令人绝望 | 笑看新倚天屠龙记 | 灯谜答题王 ｜ 用Python做个海量蜜斯姐素描图 ｜ 碟中谍那么火，我用机器进修做个迷你保举系统片子
兴趣:弹球游戏 | 九宫格 | 标致的花 | 两百行Python《天天酷跑》游戏!
AI:会做诗的机器人 | 给图片上色 | 预测收入 | 碟中谍那么火，我用机器进修做个迷你保举系统片子
小东西: Pdf转Word，轻松搞定表格和水印！ | 一键把html网页保留为pdf！ |再见PDF提取收费！ | 用90行代码打造最强PDF转换器，word、PPT、excel、markdown、html一键转换 | 造做一款钉钉低价机票提醒器！ ｜60行代码做了一个语音壁纸切换器天天看蜜斯姐！ ｜
年度爆款案牍
1). 卧槽！Pdf转Word用Python轻松搞定 ！
2).学Python实香！我用100行代码做了个网站，帮人PS游览图片，赚个鸡腿吃
3).首播过亿，火爆全网，我阐发了《披荆斩棘的姐姐》，发现了那些奥秘
4). 80行代码！用Python做一个哆来A梦分身
5).你必需掌握的20个python代码，短小精悍，用途无限
6). 30个Python奇淫技巧集
7). 我总结的80页《菜鸟学Python精选干货.pdf》,都是干货
8). 再见Python！我要学Go了！2500字深度阐发 ！
9).发现一个舔狗福利！那个Python爬虫神器太爽了，主动下载妹子图片