OBS Studio 虛擬攝影棚開講：使用 OBS 瀏覽器時，如果網頁內容超過一個頁面時，該如何捲動？如何設定網頁背景顏色？


OBS 中可以使用「瀏覽器」來源，將想要置入 OBS 的網頁內容加入，並透過「互動」方式來操作網頁的內容！詳細的使用方式可以參考此篇文章：如何在 OBS 視窗中互動操作網頁內容或教材？

 image


如果您曾使用 OBS 的「瀏覽器」來源載入特定網頁內容時，可能就會遇到以下這兩個問題
  • 網頁內容超過一個頁面時，為何無法捲動網頁？
  • 為何載入網頁時，其背景顏色會變透明，無法遮住其下方的其他來源內容？

一、修改隱藏超過視窗網頁的 CSS 語法

但是，在網頁右側並沒有捲軸可以往下捲動，因為 OBS 瀏覽器來源 CSS 的預設值：overflow:hidden; 超過視窗的部份設為隱藏。


只要將此 CSS 語法刪除，就可以在「互動」視窗中使用滑鼠滾輪捲動網頁內容囉！


※ 若要復原為原來預設值時，可以選按「瀏覽器」屬性視窗左下角的「預設設定檔」鈕，就可以找回 OBS 原來的 CSS 語法囉！


二、為什麼載入的網頁背景會是透明的？


這個也是因為 OBS 「瀏覽器」預設 CSS 設定的關係！
  • CSS 語法：background-color: rgba(紅色, 綠色, 藍色, 透明度)

其中「透明度」的數值範圍從「0：透明」~「100：不透明」，只要指定想要呈現的 RGB 值，再將透明度設為 100，網頁的背景顏色就可以在 OBS 中正確顯示出來囉！




※ 教學資料總整理：

※ 延伸閱讀：


留言

張貼留言