那天在B站看視頻的時候偶然發現當字幕遇到人物的時候就被裁切了,不會擋住人物,覺得很神奇,于是決定一探究竟。
高端的效果,往往只需要采用最樸素的實現方式,忙碌了兩個小時,陳師傅打開了F12,豁然開朗。一張圖片+一個屬性,直接搞定。
為了印證我的想法,我決定自己寫一個demo
Title 元芳,你怎么看你難道就是傳說中的奶靈你好,我是胖靈這是第一集,還沒有舔靈
效果是這樣的
加一個紅背景,看的清楚一些
至此我們就實現了B站同款的不遮擋人物的彈幕。至于這張圖片是怎么來的,肯定是AI識別出來然后生成的,一張圖片也就一兩K,一次加載很多張也不會造成很大的負擔。
最后來看看這個神奇的css屬性吧
developer.mozilla.org/zh-CN/docs/…
Experimental: 這是一個實驗中的功能
所以在開發需求的時候可以把它當成一個亮點使用,但是不能強依賴于這個屬性做需求。
它還有一系列的屬性,有興趣的話可以挨個試一下。
原作者:稀土掘金錢得樂 在此特別鳴謝!
-
AI
+關注
關注
88文章
34472瀏覽量
275915 -
CSS
+關注
關注
0文章
110瀏覽量
14762
原文標題:為什么 B 站的彈幕可以不擋人物?
文章出處:【微信號:芋道源碼,微信公眾號:芋道源碼】歡迎添加關注!文章轉載請注明出處。
發布評論請先 登錄
太強了!AI PC搭載70B大模型,算力狂飆,內存開掛

英特爾發布全新GPU,AI和工作站迎來新選擇
輕輕松松學電工(識圖篇)
典型電路原理、電路識圖從入門到精通等資料

首創開源架構,天璣AI開發套件讓端側AI模型接入得心應手
電路識圖從入門到精通高清電子資料
阿里國際站“八先過海”計劃助力B2B商家出海
阿里國際站AI升級,接入DeepSeek等先進模型
現代(Hyundai)機器人物聯網平臺可以實現什么功能
中軟國際推出升級版一站式AI解決方案服務
三星自主研發知識圖譜技術,強化Galaxy AI用戶體驗與數據安全
AI賦能B2B營銷,徑碩科技"融合AI?驅動AI"峰會成功舉辦

知識圖譜與大模型之間的關系
攪拌站可以用純電容補償方案嗎

評論