Implementing Non‑Obstructive Subtitles on Bilibili Using CSS mask‑image
This article demonstrates how to recreate Bilibili's subtitle effect that avoids covering on‑screen characters by using a simple HTML structure combined with the CSS mask‑image property, providing a complete demo, visual results, and practical considerations for frontend developers.
While watching a video on Bilibili, the author noticed that subtitles automatically avoid covering the characters and decided to investigate the technique behind this effect.
The solution turns out to be surprisingly simple: a single image used as a mask together with the CSS -webkit-mask-image property can achieve the desired non‑obstructive subtitle layout.
The article includes a complete demo consisting of an HTML page with a .video container, a CSS mask applied via -webkit-mask-image: url("mask.svg"), and several absolutely positioned .bullet elements that represent the subtitle lines.
<code style="padding: 16px; color: #abb2bf; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px"><!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></code>The resulting visual shows subtitles that appear over the video without obscuring the characters, and the author adds a red background to make the effect clearer.
The key CSS property used is -webkit-mask-image, which is currently marked as experimental; a link to the MDN documentation is provided for reference.
Because the feature is experimental, the author advises using it as an eye‑catching highlight rather than a core dependency in production projects.
Additional related mask properties are mentioned, encouraging readers to explore them further.
Source: juejin.cn
The article concludes with a call to share the content and join a community of architects for further learning.
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 Architect Essentials
Committed to sharing quality articles and tutorials to help Java programmers progress from junior to mid-level to senior architect. We curate high-quality learning resources, interview questions, videos, and projects from across the internet to help you systematically improve your Java architecture skills. Follow and reply '1024' to get Java programming resources. Learn together, grow together.
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.