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]

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

      
  
 
元芳，你怎么看
 
你难道就是传说中的奶灵
 
你好，我是胖灵
 
这是第一集，还没有舔灵
 
  

The effect is like this

##Add a red background to see more clearly:

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.

- END -

For more programming-related knowledge, please visit:

Programming Video! !