那天在B站看視頻的時(shí)候偶然發(fā)現(xiàn)當(dāng)字幕遇到人物的時(shí)候就被裁切了,不會(huì)擋住人物,覺得很神奇,于是決定一探究竟。
高端的效果,往往只需要采用最樸素的實(shí)現(xiàn)方式,忙碌了兩個(gè)小時(shí),陳師傅打開了F12,豁然開朗。一張圖片+一個(gè)屬性,直接搞定。


為了印證我的想法,我決定自己寫一個(gè)demo
Title 元芳,你怎么看你難道就是傳說中的奶靈你好,我是胖靈這是第一集,還沒有舔靈
效果是這樣的

加一個(gè)紅背景,看的清楚一些

至此我們就實(shí)現(xiàn)了B站同款的不遮擋人物的彈幕。至于這張圖片是怎么來的,肯定是AI識(shí)別出來然后生成的,一張圖片也就一兩K,一次加載很多張也不會(huì)造成很大的負(fù)擔(dān)。
最后來看看這個(gè)神奇的css屬性吧
developer.mozilla.org/zh-CN/docs/…
Experimental: 這是一個(gè)實(shí)驗(yàn)中的功能
所以在開發(fā)需求的時(shí)候可以把它當(dāng)成一個(gè)亮點(diǎn)使用,但是不能強(qiáng)依賴于這個(gè)屬性做需求。
它還有一系列的屬性,有興趣的話可以挨個(gè)試一下。

原作者:稀土掘金錢得樂 在此特別鳴謝!
-
AI
+關(guān)注
關(guān)注
91文章
39793瀏覽量
301404 -
CSS
+關(guān)注
關(guān)注
0文章
110瀏覽量
15501
原文標(biāo)題:為什么 B 站的彈幕可以不擋人物?
文章出處:【微信號(hào):芋道源碼,微信公眾號(hào):芋道源碼】歡迎添加關(guān)注!文章轉(zhuǎn)載請(qǐng)注明出處。
發(fā)布評(píng)論請(qǐng)先 登錄
太強(qiáng)了!AI PC搭載70B大模型,算力狂飆,內(nèi)存開掛
使用NORDIC AI的好處
發(fā)力圖形工作站和AI推理市場(chǎng),英特爾大顯存GPU亮相灣芯展
【今晚7點(diǎn)半】正點(diǎn)原子 x STM32:智能加速邊緣AI應(yīng)用開發(fā)!今晚正點(diǎn)原子B站直播間等你
Arm首席執(zhí)行官Rene Haas入選《時(shí)代》周刊全球AI百大人物
小馬智行彭軍入選2025年全球AI領(lǐng)域百大影響力人物
【BPI-CanMV-K230D-Zero開發(fā)板體驗(yàn)】視頻會(huì)議場(chǎng)景下的 AI 應(yīng)用(電子云臺(tái) EPTZ、人像居中 / 追蹤、畫中畫)
奇異摩爾田陌晨榮獲中國(guó)半導(dǎo)體行業(yè)領(lǐng)軍人物獎(jiǎng)
英特爾發(fā)布全新GPU,AI和工作站迎來新選擇
輕輕松松學(xué)電工(識(shí)圖篇)
典型電路原理、電路識(shí)圖從入門到精通等資料
是AI識(shí)圖嗎?為什么B站的彈幕可以不擋人物?
評(píng)論