How to Create Non‑Obstructive Bilibili‑Style Subtitles with a Simple CSS Mask
This article explains how a single image and the CSS -webkit-mask-image property can be used to prevent subtitles from covering on‑screen characters, replicating Bilibili's non‑obstructive bullet subtitles with a lightweight, experimental technique demonstrated through a complete HTML demo.
While watching a video on Bilibili, I noticed that subtitles are automatically cut when they intersect with on‑screen characters, preventing the text from covering the figures. Intrigued by this effect, I decided to investigate how it works.
After a couple of hours of debugging with the browser's developer tools, I discovered that the effect can be achieved with a surprisingly simple approach: a single mask image combined with the CSS -webkit-mask-image property.
To confirm the idea, I built a small 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 resulting display looks like this:
Adding a red background makes the effect clearer:
With this technique we achieve the same non‑obstructive bullet subtitles as seen on Bilibili. The mask image is typically generated by AI, is only a few kilobytes in size, and loading many such images does not impose a heavy load.
The CSS property used is documented on MDN (developer.mozilla.org) and is currently marked as Experimental , meaning it is an experimental feature.
Therefore, you can use it as an eye‑catching highlight in your projects, but you should not rely on it for critical functionality. The property also has a set of related options that you can explore further.
Architect's Guide
Dedicated to sharing programmer-architect skills—Java backend, system, microservice, and distributed architectures—to help you become a senior architect.
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.