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.
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.