Jak ustawić przejrzystość źródła przeglądarki w OBS Studio

Opublikowany: 2026-02-19

Dodałeś więc źródło przeglądarki w OBS Studio. Ładny. Ale teraz wokół niego widzisz brzydką białą lub czarną ramkę. Nie miło. Nie martw się. Zapewnienie przejrzystości źródła przeglądarki w OBS jest łatwiejsze niż myślisz. Potrzebujesz tylko odpowiednich ustawień. I może jedna lub dwie małe poprawki.

TLDR: Aby źródło przeglądarki było przezroczyste w OBS Studio, Twoja strona internetowa musi mieć przezroczyste tło, a OBS nie może wymuszać koloru tła. Ustaw tło strony na przezroczyste we właściwościach źródła przeglądarki. W razie potrzeby edytuj CSS swojej nakładki, aby użyć tła: przezroczyste; . Po zakończeniu nakładka będzie idealnie komponować się ze strumieniem.

Po pierwsze, czym jest źródło przeglądarki?

Źródłem przeglądarki w OBS jest wbudowana mini przeglądarka internetowa. Ładuje strony internetowe bezpośrednio do Twojej sceny. To jest idealne dla:

  • Alerty strumieniowe
  • Nakładki czatu
  • Listy wydarzeń
  • Niestandardowe widżety HTML
  • Etykiety strumieniowe

Zamiast przechwytywać ekran witryny internetowej, OBS ładuje ją bezpośrednio. Dzięki temu jest czysty i ostry. Ale przejrzystość działa tylko wtedy, gdy pozwala na to sama witryna.

To jest kluczowa idea. OBS nie może w magiczny sposób usunąć tła wtopionego w stronę.

Krok 1: Dodaj źródło przeglądarki w OBS

Jeśli jeszcze tego nie zrobiłeś, zacznijmy od zera.

  1. Otwórz Studio OBS.
  2. Przejdź do panelu Źródła .
  3. Kliknij przycisk + .
  4. Wybierz opcję Przeglądarka .
  5. Nazwij to jak chcesz.
  6. Kliknij OK .

Teraz wklej swój adres URL w polu adresu URL. W razie potrzeby ustaw szerokość i wysokość. Następnie kliknij OK.

Teraz w oknie podglądu powinno pojawić się źródło przeglądarki.

Jeśli masz solidne tło, czytaj dalej.

Nie znaleziono obrazu w postmeta

Krok 2: Upewnij się, że tło witryny jest przezroczyste

To najważniejszy krok.

Strona nakładki musi mieć przezroczyste tło. Jeśli strona używa koloru białego, czarnego lub innego jednolitego koloru, OBS to pokaże.

Jeśli kontrolujesz HTML lub CSS, dodaj to:

ciało {
  tło: przezroczyste;
}

Albo jeszcze lepiej:

html, treść {
  kolor tła: rgba(0, 0, 0, 0);
}

Wymusza to pełną przejrzystość.

Jeśli korzystasz z usługi alertów lub nakładek innej firmy, zajrzyj do jej ustawień. Wiele z nich ma pole wyboru z informacją na przykład:

  • Włącz przezroczyste tło
  • Wyłącz tło
  • Niestandardowy CSS

Włącz, jeśli jest dostępny.

Jeśli nie, sprawdź, czy możesz wstrzyknąć niestandardowy CSS. To zwykle rozwiązuje problem.

Krok 3: Sprawdź ustawienia źródła przeglądarki OBS

Kliknij prawym przyciskiem myszy źródło przeglądarki w OBS.

Wybierz Właściwości .

Teraz przyjrzyj się uważnie ustawieniom.

Upewniać się:

  • Wklejono prawidłowy adres URL .
  • Szerokość i wysokość odpowiadają rozmiarowi nakładki.
  • Jeśli istnieje pole Niestandardowy CSS , nie wymusza ono koloru tła.

Jeśli widzisz niestandardowe pole CSS, możesz także dodać:

body { kolor tła: rgba(0,0,0,0) !ważne; }

Kliknij OK po zmianach.

Jeśli wszystko jest ustawione poprawnie, tło powinno zniknąć.

Typowy problem: Białe tło nadal się wyświetla

To się często zdarza.

Oto dlaczego:

  • Strona posiada domyślnie białe tło.
  • CSS nie został poprawnie zastosowany.
  • Nakładana platforma wymusza stylizację.

Szybkie poprawki:

  1. Odśwież źródło przeglądarki (kliknij prawym przyciskiem myszy → Odśwież).
  2. Uruchom ponownie OBS-a.
  3. Wyczyść pamięć podręczną przeglądarki (wewnątrz właściwości źródła przeglądarki).

Tak, pamięć podręczna może powodować problemy. Zwłaszcza po zmianie CSS.

Dodatkowa wskazówka: użyj PNG i WebM dla przejrzystości

Jeśli źródło Twojej przeglądarki wyświetla obrazy lub animacje, upewnij się, że obsługują one przezroczystość.

Najlepsze formaty:

  • PNG dla obrazów
  • WebM z kanałem alfa dla wideo
  • GIF (ograniczona jakość, ale działa)

Jeśli używasz MP4, przezroczystość nie będzie działać. MP4 nie obsługuje kanałów alfa.

To nie jest problem OBS. To ograniczenie formatu.

Co się stanie, jeśli nie możesz edytować witryny internetowej?

Czasami nie kontrolujesz strony.

Może to widget. Lub narzędzie innej firmy bez opcji CSS.

Nadal masz opcje.

Opcja 1: Użyj klucza Chroma

Jeśli tło jest jasnozielone lub ma inny jednolity kolor, możesz je usunąć.

  1. Kliknij prawym przyciskiem myszy źródło przeglądarki.
  2. Wybierz opcję Filtry .
  3. Kliknij + .
  4. Wybierz Klucz Chroma .

Dostosuj ustawienia, aż tło zniknie.

Działa to najlepiej na jasnozielonym tle.

Ale to nie jest idealne. Drobne szczegóły mogą ucierpieć.

Nie znaleziono obrazu w postmeta

Opcja 2: Przytnij

Przytrzymaj ALT podczas przeciągania krawędzi źródła w OBS.

Spowoduje to przycięcie części ramki.

W ten sposób możesz ukryć niechciane krawędzie tła.

To proste. I szybko.

Metoda zaawansowana: w przypadku niestandardowych nakładek HTML

Jeśli tworzysz własne nakładki, przejrzystość jest łatwa.

Rozpocznij swój kod HTML w ten sposób:

<!DOCTYPE html>
<html>
<głowa>
<styl>
  html, treść {
    margines: 0;
    dopełnienie: 0;
    tło: przezroczyste;
    przepełnienie: ukryte;
  }
</styl>
</głowa>
<ciało>

<!-- Twoja treść tutaj -->

</ciało>
</html>

Dzięki temu marginesy zostaną usunięte, a strona pozostanie czysta i całkowicie przezroczysta.

Unikaj także dodawania:

  • Obrazy tła
  • Gradienty tła
  • Domyślne kolory motywu

Zachowaj minimalizm.

OBS zajmie się resztą.

Wskazówki dotyczące wydajności

Przejrzystość jest świetna. Źródła przeglądarki mogą jednak korzystać z procesora.

Zadbaj o płynność:

  • Użyj małych wymiarów nakładki.
  • Wyłącz niepotrzebne animacje.
  • Zmniejsz liczbę klatek na sekundę, jeśli nie jest to potrzebne.
  • Unikaj ciężkiego JavaScriptu.

Jeśli nakładka będzie się opóźniać, może to nie być problem z przezroczystością. To może być po prostu zbyt skomplikowane.

Szybka lista kontrolna przejrzystości

Jeśli coś nie działa, przejrzyj tę listę:

  • Czy tło strony internetowej jest ustawione na przezroczyste?
  • Czy użyłeś tła: przezroczyste; w CSSie?
  • Odświeżyłeś źródło?
  • Czyściłeś pamięć podręczną?
  • Czy formaty obrazów obsługują przezroczystość?
  • Czy OBS jest aktualny?

Większość problemów można rozwiązać w czasie krótszym niż pięć minut.

Dlaczego przejrzystość ma znaczenie

Przezroczyste nakładki wyglądają profesjonalnie.

Wtapiają się w Twoją scenę.

Żadnych brzydkich pudełek.

Żadnych dziwnych granic.

Twoje alerty w naturalny sposób unoszą się nad rozgrywką lub kamerą.

Twój strumień natychmiast wygląda czyściej.

Mały szczegół. Znaczna różnica.

Ostatnie przemyślenia

Zapewnienie przejrzystości źródła przeglądarki w OBS Studio nie jest skomplikowane.

Na początku wydaje się to tajemnicze.

Pamiętaj o złotej zasadzie:

Przejrzystość musi wynikać z samej witryny internetowej.

OBS wyświetli dokładnie to, co wyświetli strona. Nic więcej. Nic mniej.

Gdy Twój CSS użyje przezroczystego tła, OBS zrobi to automatycznie.

A teraz idź posprzątaj te nakładki.

Twój stream na to zasługuje.