用新学(搜)到的代码优化(修补)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 支持 */
}

以上。(荒废的博客，偶尔也需要浇浇水。)