How to Use CSS mask-image to Keep Bilibili Subtitles From Covering Characters
This article explains how a single mask image and the CSS mask-image property can be used to prevent subtitles from overlapping on‑screen characters in Bilibili videos, providing a lightweight demo with HTML/CSS code, visual results, and practical cautions about browser support.
While watching a video on Bilibili, the author noticed that subtitles were automatically cut when they overlapped a character, creating a clean visual effect. Curious, they set out to reproduce this behavior with a simple web demo.
Implementation Overview
The solution requires only one image (a mask) and a CSS property. The mask image is generated by an AI tool and is only a few kilobytes, so loading many of them does not add noticeable overhead.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mask 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 demo renders the text bullets only where the mask allows them, so the subtitles never cover the underlying character graphics.
Visual Result
With a red background added for clarity, the effect looks like the Bilibili native implementation where subtitles are automatically trimmed to avoid obscuring characters.
Note that mask-image is still an experimental CSS feature. Support varies across browsers, and vendor prefixes (e.g., -webkit-) may be required. It should be used as a visual enhancement rather than a core functional requirement.
Developers are encouraged to experiment with related CSS mask properties, but must consider fallback strategies for browsers that do not yet implement them.
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.
Liangxu Linux
Liangxu, a self‑taught IT professional now working as a Linux development engineer at a Fortune 500 multinational, shares extensive Linux knowledge—fundamentals, applications, tools, plus Git, databases, Raspberry Pi, etc. (Reply “Linux” to receive essential resources.)
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.