How to Use CSS mask-image for Bilibili‑style Non‑Obstructive Danmaku
This article explains how a simple CSS mask‑image technique—using a single mask picture and a few style rules—can replicate Bilibili’s subtitle effect that avoids covering on‑screen characters, includes a complete demo, performance notes, and links to related CSS properties.
While watching a Bilibili video the author noticed that subtitles (danmaku) automatically avoid covering characters, which sparked curiosity to reproduce the effect.
The solution relies on the CSS mask-image property: by providing a mask picture that defines transparent regions where characters appear, the subtitles are clipped accordingly. The implementation is minimal—just one image and a few CSS rules.
Below is a complete HTML demo. The <style> block defines a container with a fixed size, applies -webkit-mask-image (or mask-image) pointing to mask.svg, and positions several .bullet elements that represent the moving subtitles.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</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 rendered result shows subtitles that appear only in the transparent parts of the mask, leaving characters fully visible. A red‑background version is also demonstrated to make the effect clearer.
The mask image itself can be generated by AI image‑recognition tools; its file size is only a few kilobytes, so loading many such masks does not impose a noticeable performance penalty.
Although the technique creates an eye‑catching visual effect, developers should treat it as an optional enhancement because browser support for mask-image (especially the -webkit- prefix) is not universal, and relying on it for core functionality may cause compatibility issues.
For readers interested in further experimentation, the CSS mask module offers additional properties such as mask-size, mask-position, mask-repeat, and mask-composite, which can be explored to achieve varied masking effects.
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.
Architecture Digest
Focusing on Java backend development, covering application architecture from top-tier internet companies (high availability, high performance, high stability), big data, machine learning, Java architecture, and other popular fields.
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.