Explore what technology is used to prevent people from being blocked by barrages at Station B!-headlines-php.cn

Explore what technology is used to prevent people from being blocked by barrages at Station B!

青灯夜游

Release： 2022-11-01 10:17:13

forward

2478 people have browsed it

Explore what technology is used to prevent people from being blocked by barrages at Station B!

When I was watching a video at Station B that day, I accidentally discovered that when the subtitles met the characters, they were cropped and would not block the characters. I thought it was amazing, so I decided to find out. .

High-end effects often only require the simplest implementation method. After two hours of busy work, Master Chen turned on F12 and suddenly became enlightened. One picture and one attribute, it can be done directly. [Learning video sharing: css video tutorial, web front-end]

Explore what technology is used to prevent people from being blocked by barrages at Station B!

In order to confirm My idea, I decided to write a demo myself

<!DOCTYPE html>
<html>
<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>
  <div style="left: 100px; top: 0;">元芳，你怎么看</div>
  <div style="left: 200px; top: 20px;">你难道就是传说中的奶灵</div>
  <div style="left: 300px; top: 40px;">你好，我是胖灵</div>
  <div style="left: 400px; top: 60px;">这是第一集，还没有舔灵</div>
</div>
</body>
</html>

Copy after login

The effect is like this

Explore what technology is used to prevent people from being blocked by barrages at Station B!

##Add a red background to see more clearly:

Explore what technology is used to prevent people from being blocked by barrages at Station B!

So far, we have realized the same barrage of the B station without blocking the characters.

As for where this picture came from, it must have been recognized and generated by AI. One picture only costs one or two K, so loading many pictures at once will not cause a big burden.

Finally, let’s take a look at this magical css attribute

mask-image: https://developer.mozilla.org/zh-CN/docs/Web/CSS/ mask-image.

Experimental: This is an experimental feature. This feature is still under development in some browsers, and the prefixes suitable for use in different browsers are different.

So you can use it as a highlight when developing requirements, but you cannot rely heavily on this attribute to make requirements.

There are also a series of attributes here. If you are interested, you can try them one by one.

Explore what technology is used to prevent people from being blocked by barrages at Station B!