用新学(搜)到的代码优化(修补)OBS直播背景装饰页
20年前的8月,菇写过这么一个网页:当我想直播游戏却没有合适的背景画面时
说是直播时可以用,但其实既没咋直播,更没实际用过,毕竟这么个页面着实简陋,于是20年后的最近几天,用搜来的代码对页面修补了一番:
- 新增动态背景图
新增渐变背景色(已砍)- 新增圆形头像区域
新增视频与头像区域绿幕抠像通道(已砍,使用mask替代)- 修改绿幕通道为mask全透明通道,可直接使用,不用再抠像
- 修改为纯前端执行,纯静态web服务器即可上线
- 新增可视化配置页面,实时预览效果,不再需要要手动修改url参数
- 其他不明显的修改
以上内容(建议使用桌面浏览器)访问网址体验:https://siitake.cn/tools/bililive/game/init.html
OBS(或直播姬等)的使用方式没有什么变化,复制配置页面生成的网址添加为“来源”,尺寸设置为1920*1080
即可,因为添加了透明通道,主画面和头像可置于下层。
本次优化(修补)主要用到两个新的知识点,此处记录备忘:
一、input[type='radio']
标签的美化,以可视化配置页面“时钟表情”选项为例
HTML:
<input type="radio" name="clock" class="clock" id="clock1" value="1" checked />
<input type="radio" name="clock" class="clock" id="clock2" value="2" />
CSS:
/* 使用class选择器设置radio组整体样式 */
.clock {
display: inline-block;
width: 64px;
height: 64px;
border: none;
}
/* 使用伪元素设置替换样式 */
.clock::before {
display: inline-block;
width: 64px;
height: 64px;
border-radius: 5px;
border: 2px solid whitesmoke;
box-sizing: border-box;
background-color: whitesmoke;
content: "";
background-size: cover;
background-position: center;
}
/* 设置被选中的样式 */
.clock:checked::before {
border-color: skyblue;
}
/* 使用id选择器设置单独样式 */
#clock1::before {
background-image: url(./src/2233_1.gif);
}
#clock2::before {
background-image: url(./src/2233_2.gif);
}
二、使用CSSmask
属性将网页元素挖个洞(Alpha透明通道)
(参考:鼠标跟随镂空效果,借助 CSS MASK 轻松实现)
CSS:
.mask {
-webkit-mask: url(./src/mask1.png); /* MASK 图片 */
-webkit-mask-size: 1920px 1080px; /* MASK 尺寸 */
-webkit-mask-repeat: no-repeat; /* 是否重复 */
-webkit-mask-position: 0 0; /* MASK 位置 */
-webkit-mask-composite: xor; /* Chorem 、Safari 支持 */
}
以上。(荒废的博客,偶尔也需要浇浇水。)
20年前的八月我还没从蛋里蹦出来
那么~2020年呢?(●ˇ∀ˇ●)
哈喽,我是 localhost,今天来给 gugu 点个赞 ?
似曾相识的句式?
好耶!
禁止禁止好耶!
好耶!原来橙梓是只猫o(=•ェ•=)m
非常Nice,如果能开源就更好了(bushi)
禁止好耶~如果能Ctrl+S就最好了(quexin)
好的,我学废了。
好耶ヽ(✿゚▽゚)ノ