How to Use CSS Mask to Prevent Subtitles from Overlapping Characters (Bilibili Style)
This article explains how a simple CSS mask‑image technique can make on‑screen subtitles avoid covering characters, reproducing Bilibili's non‑obstructive caption effect with just an image and a single CSS property, complete with a working demo and usage cautions.
While watching a video on Bilibili, the author noticed that subtitles automatically avoid covering on‑screen characters, which sparked curiosity to investigate the underlying technique.
After inspecting the page with the browser's developer tools, it turned out the effect is achieved with a single CSS property: -webkit-mask-image (or mask-image) pointing to a mask SVG that defines the transparent area where subtitles should appear.
The author created a minimal demo consisting of an HTML file and a small CSS block. The HTML defines a container .video with a fixed size and applies the mask image, while several absolutely positioned .bullet elements represent subtitle lines:
<!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>The resulting visual matches Bilibili's behavior: subtitles appear only in the unmasked region, leaving characters unobstructed. The mask image can be generated automatically (e.g., via AI) and is only a few kilobytes, so loading many masks does not impose a heavy performance burden.
The key CSS property used is experimental; it works in browsers that support -webkit-mask-image but should not be relied upon for critical functionality. Developers can treat it as a visual enhancement while providing fallback solutions for browsers lacking support.
Additional mask‑related properties exist and can be explored for further customization.
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.