用新学(搜)到的代码优化(修补)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. 好耶ヽ(✿゚▽゚)ノ

评论已关闭