搜索历史

清空
搜索热词
      0
      • 聊天消息
      • 系统消息
      • 评论与回复
      查看更多
      查看更多
      查看更多
      VIP于 到期 续费
      登录后你可以
      • 下载海量资料
      • 学习在线课程
      • 观看技术视频
      • 写文章/发帖/加入社区
      会员中心
      创作中心
      发布
      创作活动

      完善资料让更多小伙伴认识你，还能领取20积分哦，立即完善>

      3天内不再提示

      是AI识图吗？为什么B站的弹幕可以不挡人物？

      jf_ro2CN3Fa • 来源：钱得乐 • 作者：钱得乐 • 2022-11-14 14:57 • 次阅读
      加入交流群
      微信小助手二维码

      扫码添加小助手

      加入工程师交流群

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

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

      49df5c82-6300-11ed-8abf-dac502259ad0.jpg

      49fe20e0-6300-11ed-8abf-dac502259ad0.jpg

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

      



<a href="https://www.elecfans.com/tags/ti/" target="_blank"><u>Ti</u></a>tle




元芳，你怎么看
      你难道就是传说中的奶灵
      你好，我是胖灵
      这是第一集，还没有舔灵

      效果是这样的

      4a21aa88-6300-11ed-8abf-dac502259ad0.jpg

      加一个红背景，看的清楚一些

      4a3f1384-6300-11ed-8abf-dac502259ad0.jpg

      至此我们就实现了B站同款的不遮挡人物的弹幕。至于这张图片是怎么来的，肯定是AI识别出来然后生成的，一张图片也就一两K，一次加载很多张也不会造成很大的负担。

      最后来看看这个神奇的css属性吧

      developer.mozilla.org/zh-CN/docs/…

      Experimental: 这是一个实验中的功能

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

      它还有一系列的属性，有兴趣的话可以挨个试一下。

      4a5bdbc2-6300-11ed-8abf-dac502259ad0.jpg

      原作者：稀土掘金钱得乐 在此特别鸣谢！

      声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容侵权或者其他违规问题，请联系本站处理。 举报投诉
      • AI
        AI
        +关注

        关注

        91

        文章

        41964

        浏览量

        303030
      • CSS
        CSS
        +关注

        关注

        0

        文章

        113

        浏览量

        15632

      原文标题：为什么 B 站的弹幕可以不挡人物？

      文章出处：【微信号：芋道源码，微信公众号：芋道源码】欢迎添加关注！文章转载请注明出处。

      收藏 人收藏
      加入交流群
      微信小助手二维码

      扫码添加小助手

      加入工程师交流群

        评论

        相关推荐
        热点推荐

        AI工作站本地养龙虾！英特尔双芯混合算力，告别云端Token焦虑

        4月23日，英特尔公司在北京举办新一代AI工作站平台发布会，英特尔中国区技术部总经理高宇宣布，面向AI工作站，英特尔推出两大重磅产品：英特尔® 至强600工作
        的头像 发表于 04-26 16:27 •1.1w次阅读
        <b class='flag-5'>AI</b>工作<b class='flag-5'>站</b>本地养龙虾！英特尔双芯混合算力，告别云端Token焦虑

        英特尔发布至强600系列工作站处理器与锐炫Pro B70 GPU，双芯联动重塑AI工作站格局

        4月23日，英特尔公司在北京举办新一代AI工作站平台发布会，推出英特尔® 至强® 600工作站处理器与英特尔锐炫™ Pro B70、B65
        的头像 发表于 04-24 09:28 •6551次阅读
        英特尔发布至强600系列工作<b class='flag-5'>站</b>处理器与锐炫Pro <b class='flag-5'>B</b>70 GPU，双芯联动重塑<b class='flag-5'>AI</b>工作<b class='flag-5'>站</b>格局

        基于先楫6E80的ethercat从站，AL Status Code报001B的错误

        基于先楫6E80的ethercat从站，主站是汇川的AC801，在DC模式下（1ms），正常OP运行一段时间后，突然掉线，AL Status Code报001B的错误，这种情况是怎么回事，可以
        发表于 03-12 14:22

        边缘AI算力临界点：深度解析176TOPS香橙派AI Station的产业价值

        DeepSeek-7B/LLaMA2-7B），仅模型权重加载就需要约14GB内存（FP16）。如果加上KV Cache、中间激活层和系统开销，流畅运行通常需要24GB-32GB内存。48GB版本可以完美覆盖
        发表于 03-10 14:19

        使用NORDIC AI的好处

        原始传感器数据，可显著降低功耗、延长电池寿命。[Edge AI 概述; Nordic Edge AI 技术页] 降低云依赖与时延 直接在设备上做推理，很多决策可以“本地实时”完成，不必等云端响应
        发表于 01-31 23:16

        Arm Unlocked 2025深圳站圆满落幕

        继上海、首尔站之后，Arm Unlocked 2025 AI 技术峰会深圳站圆满落幕。在面对持续增长的人工智能 (AI) 算力需求，Arm 正持续推进“平台优先”战略，在高性能、高能效
        的头像 发表于 11-04 18:01 •1509次阅读

        发力图形工作站和AI推理市场，英特尔大显存GPU亮相湾芯展

        英特尔发布了面向专业的锐炫Pro B50和B60。这两款显卡比较RTX2000和5660Ti,有哪些性能上的优势？在支持AI推理工作站和大模型部署上，
        的头像 发表于 10-22 13:40 •1.2w次阅读
        发力图形工作<b class='flag-5'>站</b>和<b class='flag-5'>AI</b>推理市场，英特尔大显存GPU亮相湾芯展

        AI模型的配置AI模型该怎么做？

        STM32可以跑AI，这个AI模型怎么搞，知识盲区
        发表于 10-14 07:14

        【今晚7点半】正点原子 x STM32：智能加速边缘AI应用开发！今晚正点原子B站直播间等你

        【直播时间】2025年9月25日，晚上19：30开始 【直播地址】B站正点原子官方直播间：https://live.bilibili.com/21481459（点击观看直播） 【直播流程详细介绍】（看
        发表于 09-25 14:14

        Arm首席执行官Rene Haas入选《时代》周刊全球AI百大人物

        近日，Arm 首席执行官 Rene Haas 荣登 《时代》周刊 2025 年全球 AI 百大人物榜单 (TIME100 AI 2025)。该榜单甄选了在塑造人工智能 (AI) 未来方
        的头像 发表于 09-04 19:58 •1682次阅读

        小马智行彭军入选2025年全球AI领域百大影响力人物

        近日，《时代》周刊公布2025年AI领域100位最具影响力人物（TIME100 AI），小马智行创始人、首席执行官彭军上榜。彭军是榜单中唯一以自动驾驶领域成就登榜的人选。
        的头像 发表于 09-02 09:36 •1119次阅读

        家电电路识图自学手册

        家电电路识图自学手册
        发表于 07-11 15:49 •16次下载

        【BPI-CanMV-K230D-Zero开发板体验】视频会议场景下的 AI 应用（电子云台 EPTZ、人像居中 / 追踪、画中画）

        缩放模拟机械云台，可以使画面移动/缩放到指定位置上，也可以实现想要的运镜效果。 2、人像居中 / 追踪 Center Stage 　　在人物走动时，“人物居中”功能可协助将人像保持在画
        发表于 07-09 20:56

        奇异摩尔田陌晨荣获中国半导体行业领军人物奖

        实力与发展成果。奇异摩尔创始人兼 CEO 田陌晨凭借在AI网络互联领域的创新成就，荣膺 “领军人物奖”。
        的头像 发表于 07-08 17:04 •2142次阅读

        STM32F769是否可以部署边缘AI？

        STM32F769是否可以部署边缘AI
        发表于 06-17 06:44
        电子发烧友
        My ElecFans
        APP
        网站地图
        设计技术
        可编程逻辑
        电源/新能源
        MEMS/传感技术
        测量仪表
        嵌入式技术
        制造/封装
        模拟技术
        RF/无线
        接口/总线/驱动
        处理器/DSP
        EDA/IC设计
        存储技术
        光电显示
        EMC/EMI设计
        连接器
        行业应用
        LEDs
        汽车电子
        音视频及家电
        通信网络
        医疗电子
        人工智能
        虚拟现实
        可穿戴设备
        机器人
        安全设备/系统
        军用/航空电子
        移动通信
        工业控制
        便携设备
        触控感测
        物联网
        智能电网
        区块链
        新科技
        特色内容
        专栏推荐
        学院
        设计资源
        设计技术
        电子百科
        电子视频
        元器件知识
        工具箱
        VIP会员
        最新技术文章
        产品地图
        品牌地图
        社区
        小组
        论坛
        问答
        评测试用
        企业服务
        产品
        资料
        文章
        方案
        企业
        供应链服务
        硬件开发
        媒体服务
        网站广告
        在线研讨会
        活动策划
        新闻发布
        新品发布
        小测验
        设计大赛
        电子发烧友
        关于我们
        联系我们
        举报投诉
        社交网络
        微博
        移动端
        发烧友APP
        WAP
        联系我们
        广告合作
        王婉珠：wangwanzhu@elecfans.com
        内容合作
        张迎辉：mikezhang@elecfans.com

        • 关注我们的微信

          关注我们的微信

        • 下载发烧友APP

          下载发烧友APP

        • 机器人发烧友

          机器人发烧友

        版权所有 © 长沙勒克斯教育咨询有限公司

        湖南省长沙市开福区月湖街道匍园路20号聚恒科技园1栋2301-1房

        电子发烧友 （电路图） 电信与信息服务业务经营许可证：湘B2-20260003 湘ICP备2023036445号-105-1