Create Bilibili‑Style Non‑Overlapping Subtitles with a Single Image and CSS Mask
This article explains how to replicate Bilibili's subtitle masking effect by using a single mask image and the CSS mask‑image property, providing a complete HTML/CSS demo, visual results, and cautions about its experimental status.
While watching a video on Bilibili, the author noticed that subtitles automatically avoid covering on‑screen characters, which sparked curiosity to uncover the technique.
After inspecting the page with developer tools, the solution turned out to be surprisingly simple: a single mask image applied via the CSS -webkit-mask-image (or mask-image) property, combined with absolute‑positioned subtitle elements.
<!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 page shows subtitles that stay clear of the video content, just like the effect on Bilibili. The mask image itself can be generated by AI, is only a few kilobytes, and loading many such masks does not impose a heavy performance burden.
The technique relies on the mask-image CSS property, which is currently marked as experimental in browsers. It can be used as a visual highlight in projects, but developers should avoid depending on it for critical functionality.
https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask-image
Feel free to experiment with related mask properties to achieve different visual effects.
Selected Java Interview Questions
A professional Java tech channel sharing common knowledge to help developers fill gaps. Follow us!
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.