← 部落格

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加入瀏覽器來源在同一個「加入來源」視窗的「來源類型」清單中選「瀏覽器」,按「建立新來源」,再把服務方給的網址貼到開啟的屬性視窗的「網址」欄。官方文件的預設值是寬度 800、高度 600,而 FPS 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
以網址提供的提醒或聊天框瀏覽器把服務方網址貼到「網址」欄;文件預設寬度 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 之一,需要透明時已用透明背景儲存
  • 瀏覽器來源的網址與服務方頁面顯示的完全一致,「本機檔案」的開關符合預期
  • 寬度與高度已對照「來源(畫布)解析度」,預覽中沒有被截掉或留空
  • 來源清單中覆蓋層位於遊戲來源上方
  • 眼睛圖示為白色,「自訂CSS」的預設內容沒有被刪掉或改動
  • 「頁面權限」仍是預設的「對 OBS 狀態資訊有讀取權限」,若改過則清楚原因
「未顯示圖片時卸載」預設關閉,官方文件說開啟後隱藏期間會釋放記憶體,但圖片重新顯示時可能短暫空白。「在線性空間套用 alpha 通道」預設同樣關閉。瀏覽器來源「頁面權限」的預設值是「對 OBS 狀態資訊有讀取權限」,選項從「沒有存取 OBS 的權限」到「對 OBS 有完整存取權限(逕行開始或停止串流而不先警告等等)」,共六級。知識庫沒有寫建議選哪一項,所以本文也不做建議,網址從哪裡來要自己核實。

版面定好後轉入錄製

以上都是在 OBS 內部搭建畫面,並不代表 DOR 有直播覆蓋層功能。DOR 在錄製階段的特點,是不必先建立 OBS 式的場景、來源與輸出設定就能開始:執行特戰英豪等受支援的遊戲,這款免費的 Windows 應用程式會自動偵測,並把整場比賽錄成 mp4。特戰英豪屬於擊殺精彩片段也會自動剪成片段的 7 款遊戲之一。錄完後可在應用程式內的錄影庫指定起點與終點來截取,並從 16:9、9:16、1:1 選擇輸出比例;免安裝的瀏覽器編輯器 DOR 工作室可在剪輯階段疊加文字,這與直播時的即時覆蓋層是兩回事。

官方來源

FAQ

常見問題

OBS 預設有內建提醒覆蓋層嗎?

沒有。官方常見問題說明 OBS Studio 沒有內建的直播提醒,需要把第三方提醒服務的覆蓋層當成瀏覽器來源加入:把服務方的提醒網址貼到瀏覽器來源的「網址」欄,再調整寬度與高度。本文不介紹特定服務方。

PNG 覆蓋層的背景為什麼不透明?

官方文件只說 alpha 在適用的格式中受支援。先確認檔案本身是否以透明背景儲存,格式是不是 BMP、TGA、PNG、JPEG、GIF 之一;若是瀏覽器來源,再看「自訂CSS」的預設內容有沒有被改動。

覆蓋層為什麼跑到遊戲畫面後面去了?

因為來源清單中較上方的來源顯示在前面。選取覆蓋層並移到遊戲來源上方,同時確認眼睛圖示是白色的顯示狀態。

Games

相關遊戲指南

繼續閱讀

相關文章

立即開始使用 DOR

DOR 會偵測支援的遊戲事件,並自動將相應瞬間儲存為剪輯