原理与实现:
原理: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-前缀进行适应。