已设置元素背景透明时如何让浏览器背景透明输出至Video-Mixer
透明背景页面输出到Video-Mixer解决方案
- 首先补充根元素透明样式,避免遗漏顶层容器的默认背景配置,在你的CSS中添加如下代码:
html, body { background-color: transparent !important; margin: 0; padding: 0; overflow: hidden; }
- 修改浏览器启动参数关闭默认白底补全,以Chrome/Edge为例,右键点击浏览器快捷方式,在「目标」栏末尾空格后添加如下参数:
--disable-gpu --enable-transparent-visuals --allow-transparent-background --disable-backgrounding-occluded-windows - 调整Video-Mixer的捕获配置,若使用OBS等工具,窗口捕获请选择「Windows 10(1903及以上)」捕获模式,优先使用工具内置的浏览器源直接加载目标页面,内置浏览器默认支持透明背景渲染,无需额外调整外部浏览器配置。
- 若以上方案仍不生效,可使用Electron自定义极简浏览器窗口,配置时开启
transparent: true、frame: false、backgroundColor: '#00000000'属性后加载目标页面,可完全规避系统或浏览器默认补白底的问题。
内容的提问来源于stack exchange,提问作者Mettavihari D
相关产品推荐
相关产品推荐

