← 博客

OBS 添加叠加层教程(2026):用图像源和浏览器源自己做

OBS Studio 预览中裁剪来源的裁剪框画面与变换编辑窗口(位置、大小、边界框、裁剪)并排的图片
图片来源: © OBS Project · official knowledge base UI
核心摘要
  • 固定的徽标或边框用“图像”源,提醒、聊天框这类网页形式的内容用“浏览器”源。
  • 源列表中位置靠上的源显示在前面,所以叠加层要放在游戏源上方。
  • 透明背景靠带 alpha 的图像文件,以及浏览器源默认的“自定义 CSS”。

在 OBS 里放叠加层,要点击“源”面板下方的 + 按钮,添加“图像”(固定图片)或“浏览器”(提醒、聊天框等小组件给出的网页地址),再把它拖到列表中游戏源的上方。要确认的只有三件事:源的类型、叠放顺序、背景是否透明。文中菜单名称对照的是 OBS Studio 32.2.2 简体中文语言文件和官方知识库,以 2026 年 10 月 6 日的确认为准,以 Windows 电脑为准。摄像头的摆放放在用摄像头画面录制游戏的方法里讲,这里只讲图像源和浏览器源。

结论:提醒功能不是 OBS 自带的

OBS Studio 没有内置的直播提醒功能,官方常见问题的做法是把第三方提醒服务提供的叠加层作为浏览器源添加。也就是说,提醒和聊天框是粘贴服务方给的地址,徽标和边框则是载入你自己准备的文件。本文不推荐任何服务方或模板网站。如果整个场景搭建让你觉得负担重,也可以参考一篇讲 OBS 太复杂时如何改用自动录制的文章。

添加图像和浏览器叠加层的步骤

  1. 1选好场景并先放游戏源在“场景”面板选中目标场景。官方串流版面教程是先通过显示器采集(Display Capture)、游戏采集(Game Capture,仅限 Windows)、窗口采集(Window Capture)或视频采集设备(Video Capture)加入游戏源,再用 编辑 > 变换 > 比例适配屏幕(Ctrl-F)让它贴合画布。叠加层就是盖在它上面的图层。
  2. 2添加图像源点击“源”面板下方的 + 按钮(添加源),在打开的“添加源”窗口的“源类型”列表中选“图像”。确认“使源可见”已勾选,再点“创建新源”按钮,源会自动获得名称并打开属性窗口。官方知识库按旧界面说明(选“新建”、输入名称、点确定),所以你看到的窗口可能略有不同。在属性窗口中用“浏览”选好文件,并点确定。支持的格式为 BMP、TGA、PNG、JPEG、GIF,alpha(透明度)在适用的格式中受支持。文件路径填在“图像文件”一项。
  3. 3添加浏览器源在同一个“添加源”窗口的“源类型”列表中选“浏览器”,点“创建新源”,再把服务方给的地址粘贴到打开的属性窗口的 URL 栏。官方文档的默认值是宽度 800、高度 600,而帧率 30 是打开“使用自定义帧率”后才用到的值(页面日期为 2022 年 1 月 11 日)。提醒教程只说要调成“合适的大小”,所以可以参考 设置 > 视频 中的“基础(画布)分辨率”来调整宽度和高度,再在预览里看有没有被截掉。保存在本机的网页则改为打开“本地文件”。
  4. 4确认背景是透明的图像文件本身是以透明背景保存的,后面的画面才会透出来。对浏览器源,官方文档写明“自定义 CSS”里的默认内容 body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; } 会让页面背景透明。如果出现实心方块,先看这一栏是否被改过。知识库里没有介绍其他透明处理方法。
  5. 5调整大小和位置选中源后,预览里会出现红色边界框。拖动即可移动,拖动角或边上的红色手柄可缩放。需要精确数值时,打开 编辑 > 变换 > 编辑变换(Windows 上为 Ctrl-E),在“位置”“大小”“裁剪”中输入。按住 Alt 拖动手柄是裁剪,按住 Ctrl 拖动则暂时取消吸附。
  6. 6设定叠放顺序列表中靠上的源画在下方源的前面。叠加层若跑到了游戏后面,先选中它,再点列表下方的向上箭头,或使用“排序”菜单里的“上移”“移至顶层”。有多个叠加层时,同样按这条规则排列。
  7. 7检查可见性、锁定与刷新眼睛图标为灰色表示已隐藏,白色表示正在显示。位置定好的源可以“锁定”。浏览器源一直显示旧页面时,在该源的设置窗口中点“刷新当前页面缓存”。

叠加层类型与对应的源

情形使用的源在官方文档里确认的值
固定徽标或边框图像“图像文件”可指定 BMP、TGA、PNG、JPEG、GIF
以网页地址提供的提醒或聊天框浏览器把服务方地址粘贴到 URL;文档默认宽度 800、高度 600
保存在本机的网页浏览器打开“本地文件”并指定路径(默认关闭)
需要透出游戏画面的叠加层带 alpha 的图像,或浏览器默认的自定义 CSS默认 CSS 为 body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
轮流显示多张图片图像幻灯片放映(Image Slide Show)文档默认值:幻灯片间隔时间 8000 ms,转场动画速度 700 ms
叠加层被游戏画面挡住源的排序列表中靠上的源显示在下方源的前面

开始录制或直播前的检查

  • 图像文件是 BMP、TGA、PNG、JPEG、GIF 之一,需要透明时已用透明背景保存
  • 浏览器源的 URL 与服务方页面显示的完全一致,“本地文件”的开关符合预期
  • 宽度和高度与“基础(画布)分辨率”对照过,预览里没有被截掉或留空
  • 源列表中叠加层位于游戏源上方
  • 眼睛图标为白色,“自定义 CSS”的默认内容没有被删掉或改动
  • “页面权限”仍是默认的“OBS 状态信息的读取权限”,若改过则清楚原因
“当不显示时卸载图像”默认关闭,官方文档说开启后隐藏期间会释放内存,但图像重新显示时可能短暂空白。“在线性空间内应用alpha通道”默认也是关闭。浏览器源“页面权限”的默认值是“OBS 状态信息的读取权限”,选项从“没有对OBS的访问权限”到“OBS 的完全访问权限(启动或停止串流时不显示警告等)”,共六级。知识库没有写推荐哪一项,所以本文也不做推荐,地址从哪里来需要你自己核实。

布局定好后转入录制

上面这些都是在 OBS 内部搭建画面,并不代表 DOR 有直播叠加层功能。DOR 在录制环节的特点,是不必先建立 OBS 式的场景、源和输出设置就能开始:运行无畏契约等受支持的游戏,这款免费 Windows 应用会自动检测,并把整场比赛录成 mp4。无畏契约属于击杀精彩片段也会自动剪成片段的 7 款游戏之一。录完后可在应用内的录像库里指定起点和终点来截取,并从 16:9、9:16、1:1 中选择输出比例;免安装的浏览器编辑器 DOR 工作室可以在剪辑阶段叠加文字,这与直播时的实时叠加层是两回事。

官方来源

FAQ

常见问题

OBS 默认自带提醒叠加层吗?

不自带。官方常见问题说明 OBS Studio 没有内置的直播提醒,需要把第三方提醒服务的叠加层作为浏览器源添加:把服务方的提醒地址粘贴到浏览器源的 URL 栏,再调整宽度和高度。本文不介绍具体服务方。

PNG 叠加层的背景为什么不透明?

官方文档只说 alpha 在适用的格式中受支持。先确认文件本身是否以透明背景保存,格式是不是 BMP、TGA、PNG、JPEG、GIF 之一;如果是浏览器源,再看“自定义 CSS”的默认内容有没有被改动。

叠加层为什么跑到游戏画面后面去了?

因为源列表中靠上的源显示在前面。选中叠加层并把它移到游戏源上方,同时确认眼睛图标是白色的显示状态。

Games

相关游戏指南

继续阅读

相关文章

立即开始使用 DOR

DOR 会检测受支持的游戏事件,并自动将相应瞬间保存为剪辑