用新学(搜)到的代码优化(修补)OBS直播背景装饰页

bg4obs2

20年前的8月，菇写过这么一个网页：当我想直播游戏却没有合适的背景画面时

说是直播时可以用，但其实既没咋直播，更没实际用过，毕竟这么个页面着实简陋，于是20年后的最近几天，用搜来的代码对页面修补了一番：

  • 新增动态背景图
  • 新增渐变背景色(已砍)
  • 新增圆形头像区域
  • 新增视频与头像区域绿幕抠像通道(已砍，使用mask替代)
  • 修改绿幕通道为mask全透明通道，可直接使用，不用再抠像
  • 修改为纯前端执行，纯静态web服务器即可上线
  • 新增可视化配置页面，实时预览效果，不再需要要手动修改url参数
  • 其他不明显的修改

以上内容(建议使用桌面浏览器)访问网址体验：https://siitake.cn/tools/bililive/game/init.html

livebg-init.png

OBS(或直播姬等)的使用方式没有什么变化，复制配置页面生成的网址添加为“来源”，尺寸设置为1920*1080即可，因为添加了透明通道，主画面和头像可置于下层。

livebg-obs.png

本次优化(修补)主要用到两个新的知识点，此处记录备忘：

一、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 支持 */
}

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

标签: none

已有 10 条评论

  1. 季悠然 季悠然

    20年前的八月我还没从蛋里蹦出来

    1. 香菇 香菇

      那么~2020年呢？(●ˇ∀ˇ●)

  2. localhost localhost

    哈喽，我是 localhost，今天来给 gugu 点个赞 ?

    1. 香菇 香菇

      似曾相识的句式?

  3. 橙梓 橙梓

    好耶！
    禁止禁止好耶！

    1. 香菇 香菇

      好耶！原来橙梓是只猫o(=•ェ•=)m

  4. 好耶好耶 好耶好耶

    非常Nice，如果能开源就更好了(bushi)

    1. 香菇 香菇

      禁止好耶~如果能Ctrl+S就最好了(quexin)

  5. 三十六 三十六

    好的，我学废了。

    1. 香菇 香菇

      好耶ヽ(✿ﾟ▽ﾟ)ノ

评论已关闭