如何实现B站弹幕隐于人后功能？

原理与实现:

原理:CSS3的mask-image属性(遮罩属性)

mask-image:url();

值为图片的url，该属性的作用是将一张含有透明部分的图片，该图片的非透明部分不显示，透明部分置于dom元素前，成为遮罩。显示的是背景颜色而不是原图片的不透明部分。

实现：

1.模拟弹幕情况

<div class="video" style="width: 1920px; height: 1000px; position: relative;">
  <p class="top one">这是第一句sentence</p>
  <p class="top two" >这是第二句sentence</p>
  <p class="top three">这是第三句sentence</p>

  

.top {
  font-size: 30px;
  top: 200px;
  position: absolute;
}
.one{
  right: 200px;
}
.two{
  right: 500px;
  top: 300px;
}
.three{
  right: 950px;
}

  

2.覆盖遮罩图片

使用一张含透明图片,为p所在的父元素添加样式

.video{
    
    -webkit-mask-image: url('background.png');
    -webkit-mask-size: 1900px 900px;
    background-color: brown;
}

效果如下(设置了背景颜色为红棕色)

PS:

我们能看到，在css中我不是用的mask-image，而是-webkit-mask-image,那是因为浏览器的用户代理UA为：

User-Agent:

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36 SLBrowser/8.0.0.7271 SLBChan/103

内核是Chrome和Safari，需要加上-webkit-前缀进行适应。