Hide Bilibili Subtitles Behind Characters with a Simple CSS Mask‑Image Trick
This article explains how a single image and the CSS mask‑image property can prevent subtitles from covering on‑screen characters, provides a complete demo with code, shows the visual result, and discusses the experimental nature and limitations of the technique.
While watching a video on Bilibili I noticed that subtitles are automatically cut when they overlap a character, so they never cover the person, which seemed magical and prompted me to investigate.
Often high‑end effects can be achieved with the simplest implementation; after two hours of tinkering I opened the dev tools and realized that a single image plus one CSS property solves it.
To verify the idea I wrote a demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</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>The result looks like this:
Adding a red background makes it clearer:
Thus we have achieved Bilibili‑like subtitles that do not cover characters. The mask image is likely generated by AI recognition; each image is only a few kilobytes, so loading many does not add significant overhead.
Finally, let's look at the magical CSS property:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask-image
Experimental: This is an experimental feature.
Therefore, you can use it as a highlight in development, but should not rely on it for critical requirements.
It also has a series of related properties; feel free to try them out.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Programmer DD
A tinkering programmer and author of "Spring Cloud Microservices in Action"
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.