css 实现视频人物不被弹幕遮挡
CSS 实现 视频 人物 弹幕 遮挡
2023-06-13 09:15:12 时间
背景
在视频平台看剧的时候,总会发现各家都已实现在有人物出现的时候,弹幕会藏在背后的情况,关键是,虽然弹幕被藏在背后,但是点击被遮挡的弹幕位置依然可以点赞成功,真是感觉特别神奇。
网上找到了一个网友发的解决方案,感觉基本符合需求,但是具体各家怎么实现的还待探究。
demo 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.video {
width: 668px;
height: 376px;
position: relative;
/* -webkit-mask-image 直接使用本地 url 会发生跨域问题,但 background-image 不会 */
/* mask-image: url("./mask.gif");
-webkit-mask-image: url("./mask.gif"); */
/* 取值是渐变色,但是没有生效 */
/* mask-image:linear-gradient(blue, pink);
-webkit-mask-image:linear-gradient(blue, pink); */
/* 最好使用 base64 来解决 */
mask-image:url("https://img-blog.csdn.net/20170701221732018");
-webkit-mask-image:url("https://img-blog.csdn.net/20170701221732018");
mask-size: 668px 376px;
-webkit-mask-size: 668px 376px;
}
.bullet {
position: absolute;
font-size: 20px;
color:pink;
}
</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>
<script>
let video = document.getElementsByClassName("video")[0];
video.addEventListener("click",(e)=>{
console.log("给当前点击弹幕点赞",e.target)
e.target.style.color = "red"
},false)
</script>
</body>
</html>
此种方案主要的实现原理是,通过AI 算法 生成遮罩蒙层图,css 再通过 -webkit-mask-image 来设置后实现,而且该方法,确实支持被蒙层遮住的地方依然可以点击。
该属性目前仅支持 -webkit 内核浏览器。
该属性的应用:解决png 图片过大,使用蒙层结合jpg 来实现 png 想要实现的部门区域背景透明效果。
实现后效果如图所示
红色文字是点击后被更改了的
参考链接:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask-image
https://blog.csdn.net/qq_40999917/article/details/121503435
https://www.zhangxinxu.com/wordpress/2020/05/css-mask-compress-png-image/
相关文章
- 手把手带你使用webpack4构建一个Vue开发编译环境,并实现代码分割,css代码分离
- css opacity属性_CSS中的opacity属性[通俗易懂]
- 【说站】css不可点击样式实现的方法
- 【说站】css内联样式的盒子模型
- html中三角向下符号,使用css实现三角符号效果[通俗易懂]
- 20个编写现代CSS代码的建议
- css-diner
- 【CSS】CSS 文本样式 ④ ( CSS 外观属性 | color 文本颜色 | text-align 文本对齐方式 | line-height 行间距设置 | 首行缩进设置 | 文本装饰设置 )
- 聊聊 CSS 隐藏元素的 10 种实用方法
- 使用html+css+js实现计算器详解编程语言
- Div+Css实现段落首行缩进两个字符(text-indent标签)详解编程语言
- JS中的CSS选择器
- css通用全局样式~a链接、列表项、浮动各种样式
- CSS 简介
- CSS与MySQL合力提升网页性能(css与mysql结合)
- 用CSS实现鼠标单击特效
- JS+CSS实现一个气泡提示框
- php实现压缩多个CSS与JS文件的方法
- Windows下使用apache模块实现合并多个js、css提高网页加载速度