Create Non‑Obstructive Subtitles Like Bilibili Using CSS Mask‑Image
The article explains how a simple CSS mask‑image technique can replicate Bilibili's subtitle behavior that avoids covering on‑screen characters, providing a minimal HTML/CSS demo, visual results, and a caution about the experimental nature of the property.
While watching a Bilibili video, the author noticed that subtitles automatically avoid covering on‑screen characters, which sparked curiosity.
After inspecting the page with DevTools, they discovered that a simple CSS mask‑image applied to the video container can achieve the same effect with just one image and a CSS property.
The following minimal demo shows the implementation:
<!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 the Bilibili style where subtitles do not block the characters. Adding a red background makes the effect clearer.
The key CSS property used is -webkit-mask-image, which is still experimental and should be used as a visual highlight rather than a hard requirement.
Developers are encouraged to experiment with related mask properties, but must be aware of limited browser support.
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 Backend Technology
Focus on Java-related technologies: SSM, Spring ecosystem, microservices, MySQL, MyCat, clustering, distributed systems, middleware, Linux, networking, multithreading. Occasionally cover DevOps tools like Jenkins, Nexus, Docker, and ELK. Also share technical insights from time to time, committed to Java full-stack development!
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.