有一天，我在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

CSS属性用于设置元素上遮罩层的图像。

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

此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

初始值	none
适用元素	all elements; In SVG, it applies to container elements excluding the `defs` element and all graphics elements
是否是继承属性	否
计算值	as specified, but with `url` values made absol
Animation type	discrete

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

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

为什么B站视频的人物可以不被弹幕挡住？相关推荐

selenium、you-get下载B站视频、监控播放量和弹幕
selenium.you-get下载B站视频.监控播放量和弹幕说明完整代码运行结果说明前两段代码是使用you-get下载视频,第一段是说明.第三段代码爬取b站视频的标题+播放量+弹幕数.注意 ...
(新)B站视频播放源地址获取及B站视频下载
突然之间,我们的B站视频播放失效了.之前直接使用的ibilibili,发现它的低清版本视频无法正常加载了.后来加上它的公众号,才发现,都不容易,十分感谢ibilibili站站长多年的坚持,尤其是听到他 ...
如何通过一行代码下载B站视频？
文章目录如何通过一行代码下载B站视频? Step1:安装you-get Step2:下载B站视频总结如何通过一行代码下载B站视频? You-Get 是一个基于 Python 3 的下载工具.使用 ...
一款b站视频下载工具软件mac版
是一款开源的哔哩哔哩视频下载工具,b站视频下载软件 mac能够快速为您下载Bilibili的视频!哔哩哔哩视频下载软件在您选择下载视频时会提示登录,登录后可以获取你的SESSDATA来用做下载,日常账 ...
python视频网站分类_用Python爬取b站视频
本文概要爬取B站视频的办法在csdn和B站有很多但是本文算作是对爬取步骤的一个拆解同时也算是我的笔记.本代码的参考对象是https://blog.csdn.net/Mr_Ohahah/artic ...
HTML高仿哔哩哔哩(B站)视频网站整站模板
简介: 100%高仿哔哩哔哩(B站)视频网站模板,包含首页.列表和内容页整站模板. 网盘下载地址: http://kekewangLuo.net/D94pktwZmYc0 图片:
qvector 结构体排序_1164 2547 (排序微课)(B站视频链接)
这次视频,录了两个题目,第一个题目是基本的排序题,可以用冒泡排序类基本的O(n^2)排序,也可以调用sort排序:第二个题目是多级排序,可以建立结构体,写cmp排序规则,然后调用sort排序.sort ...
python爬取b站评论_学习笔记(1):写了个python爬取B站视频评论的程序
学习笔记(1):写了个python爬取B站视频评论的程序 import requests import json import os table='fZodR9XQDSUm21yCkr6zBqiveY ...
从入门到入土：Python实现爬取某站视频|根据视频编号|支持通过视频名称和创作者名称寻找编号|以及python moviepy合并音频视频
写在前面: 此博客仅用于记录个人学习进度,学识浅薄,若有错误观点欢迎评论区指出.欢迎各位前来交流.(部分材料来源网络,若有侵权,立即删除) Python实现爬取某站视频|根据视频编号|支持通过视频名称 ...

为什么B站视频的人物可以不被弹幕挡住？

效果是这样的

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

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

mask-image

为什么B站视频的人物可以不被弹幕挡住？相关推荐

最新文章

热门文章