Create Bilibili‑Style Non‑Obstructive Subtitles with a Single CSS Mask
This article explains how to replicate Bilibili’s non‑overlapping subtitle effect using a simple HTML demo and the experimental CSS mask‑image property, detailing the implementation steps, code example, and visual results while noting its experimental status.
While watching a video on Bilibili, I noticed that subtitles are automatically cut when they overlap a person, preventing the text from covering the figure, which seemed magical, so I decided to explore how it works.
Often a high‑end effect can be achieved with a very simple implementation. After two hours of tinkering, I discovered that a single image combined with one CSS property solves the problem.
<!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 result looks like this:
Adding a red background makes it clearer:
Thus we have reproduced Bilibili’s non‑obstructive subtitle effect. The mask image is typically generated by AI, only a few kilobytes in size, so loading many such images does not cause a heavy load.
For reference, the CSS property used is mask-image (or its WebKit prefix -webkit-mask-image), which is still experimental.
https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask-image
It can be used as a visual highlight in projects, but should not be relied upon as a mandatory feature. There are also a series of related properties that you can experiment with.
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.
Java High-Performance Architecture
Sharing Java development articles and resources, including SSM architecture and the Spring ecosystem (Spring Boot, Spring Cloud, MyBatis, Dubbo, Docker), Zookeeper, Redis, architecture design, microservices, message queues, Git, etc.
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.