Cum să faci sursa browserului transparentă în OBS Studio

Publicat: 2026-02-19

Deci ați adăugat o sursă de browser în OBS Studio. Frumos. Dar acum vezi o cutie urâtă, albă sau neagră în jurul ei. Nu e frumos. Nu vă faceți griji. A face transparentă sursa browserului în OBS este mai ușor decât credeți. Ai nevoie doar de setările potrivite. Și poate una sau două mici ajustări.

TLDR: Pentru a face o sursă de browser transparentă în OBS Studio, pagina dvs. web trebuie să aibă un fundal transparent, iar OBS nu trebuie să forțeze o culoare de fundal. Setați fundalul paginii la transparent în proprietățile sursei browserului. Dacă este necesar, editați CSS-ul suprapunerii pentru a utiliza fundalul: transparent; . Odată terminat, suprapunerea se va amesteca curat cu fluxul.

În primul rând, ce este o sursă de browser?

O sursă de browser în OBS este un mini browser web încorporat. Încarcă site-uri direct în scena ta. Acesta este perfect pentru:

  • Transmite alerte
  • Suprapuneri de chat
  • Liste de evenimente
  • Widgeturi HTML personalizate
  • Etichete în flux

În loc să capteze ecranul unui site web, OBS îl încarcă direct. Asta o face curată și ascuțită. Dar transparența funcționează doar dacă site-ul în sine o permite.

Aceasta este ideea cheie. OBS nu poate elimina în mod magic un fundal care este copt în pagină.

Pasul 1: Adăugați o sursă de browser în OBS

Dacă nu ați făcut-o deja, să începem de la zero.

  1. Deschide OBS Studio.
  2. Accesați panoul Surse .
  3. Faceți clic pe butonul + .
  4. Selectați Browser .
  5. Numiți cum doriți.
  6. Faceți clic pe OK .

Acum inserați adresa URL în câmpul URL. Setați lățimea și înălțimea dacă este necesar. Apoi faceți clic pe OK.

Acum ar trebui să vedeți sursa browserului dvs. să apară în fereastra de previzualizare.

Dacă există un fundal solid, continuați să citiți.

Imaginea nu a fost găsită în postmeta

Pasul 2: Asigurați-vă că fundalul site-ului este transparent

Acesta este cel mai important pas.

Pagina dvs. de suprapunere trebuie să aibă un fundal transparent. Dacă pagina folosește alb, negru sau orice culoare solidă, OBS o va afișa.

Dacă controlați HTML sau CSS, adăugați aceasta:

corp {
  fundal: transparent;
}

Sau chiar mai bine:

html, corp {
  culoare de fundal: rgba(0, 0, 0, 0);
}

Acest lucru impune transparența deplină.

Dacă utilizați un serviciu de alertă sau de suprapunere terță parte, priviți în setările acestuia. Mulți au o casetă de selectare care spune ceva de genul:

  • Activați fundalul transparent
  • Dezactivați fundalul
  • CSS personalizat

Porniți-l dacă este disponibil.

Dacă nu, verificați dacă puteți injecta CSS personalizat. Asta o rezolva de obicei.

Pasul 3: Verificați setările sursei browserului OBS

Faceți clic dreapta pe sursa browserului dvs. în OBS.

Selectați Proprietăți .

Acum uitați-vă cu atenție la setări.

Asigurați-vă că:

  • Adresa URL corectă este lipită.
  • Lățimea și înălțimea se potrivesc cu dimensiunea suprapunerii.
  • Dacă există o casetă CSS personalizată , aceasta nu forțează o culoare de fundal.

Dacă vedeți un câmp CSS personalizat, puteți adăuga și:

body { background-color: rgba(0,0,0,0) !important; }

Faceți clic pe OK după modificări.

Dacă totul este setat corect, fundalul ar trebui să dispară.

Problemă obișnuită: fundalul alb apare în continuare

Acest lucru se întâmplă des.

Iată de ce:

  • Site-ul web are un fundal alb implicit.
  • CSS nu a fost aplicat corect.
  • Platforma de suprapunere forțează stilul.

Remedieri rapide:

  1. Actualizează sursa browserului (clic dreapta → Actualizează).
  2. Reporniți OBS.
  3. Ștergeți memoria cache a browserului (în interiorul proprietăților sursei browserului).

Da, memoria cache poate cauza probleme. Mai ales după schimbarea CSS-ului.

Sfat bonus: Folosiți PNG și WebM pentru transparență

Dacă sursa browserului dvs. afișează imagini sau animații, asigurați-vă că acestea acceptă transparență.

Cele mai bune formate:

  • PNG pentru imagini
  • WebM cu canal alfa pentru video
  • GIF (calitate limitată, dar funcționează)

Dacă utilizați MP4, transparența nu va funcționa. MP4 nu acceptă canale alfa.

Aceasta nu este o problemă OBS. Este o limitare de format.

Ce se întâmplă dacă nu poți edita site-ul?

Uneori nu controlezi pagina.

Poate este un widget. Sau un instrument terță parte fără opțiuni CSS.

Mai ai optiuni.

Opțiunea 1: Folosiți o cheie Chroma

Dacă fundalul este verde strălucitor sau o altă culoare solidă, îl puteți elimina.

  1. Faceți clic dreapta pe sursa browserului.
  2. Selectați Filtre .
  3. Faceți clic pe + .
  4. Alegeți Chroma Key .

Reglați setările până când fundalul dispare.

Acest lucru funcționează cel mai bine cu fundaluri verzi strălucitoare.

Dar nu este perfect. Detaliile fine pot avea de suferit.

Imaginea nu a fost găsită în postmeta

Opțiunea 2: Decupați-l

Țineți apăsat ALT în timp ce trageți marginile sursei în OBS.

Acest lucru decupează părți ale cadrului.

Puteți ascunde marginile de fundal nedorite în acest fel.

Este simplu. Și repede.

Metodă avansată: pentru suprapuneri HTML personalizate

Dacă vă construiți propriile suprapuneri, transparența este ușoară.

Începeți codul HTML astfel:

<!DOCTYPE html>
<html>
<cap>
<stil>
  html, corp {
    marja: 0;
    umplutură: 0;
    fundal: transparent;
    preaplin: ascuns;
  }
</stil>
</cap>
<corp>

<!-- Conținutul dvs. aici -->

</corp>
</html>

Acest lucru elimină marginile și se asigură că pagina rămâne curată și complet transparentă.

De asemenea, evitați să adăugați:

  • Imagini de fundal
  • Degrade de fundal
  • Culorile implicite ale temei

Păstrează-l minim.

OBS se va ocupa de restul.

Sfaturi de performanță

Transparența este grozavă. Dar sursele browserului pot folosi CPU.

Păstrați lucrurile netede:

  • Utilizați dimensiuni mici de suprapunere.
  • Dezactivați animațiile inutile.
  • Rată de cadre mai mică dacă nu este necesar.
  • Evitați JavaScript greoi.

Dacă o suprapunere întârzie, este posibil să nu fie o problemă de transparență. Poate fi prea complex.

Lista rapidă de verificare a transparenței

Dacă ceva nu funcționează, parcurge această listă:

  • Fundalul site-ului este setat la transparent?
  • Ai folosit fundal: transparent; în CSS?
  • Ai reîmprospătat sursa?
  • Ai șters memoria cache?
  • Formatele de imagine acceptă transparența?
  • Este OBS la zi?

Cele mai multe probleme sunt rezolvate în mai puțin de cinci minute.

De ce este importantă transparența

Suprapunerile transparente arată profesional.

Se amestecă în scena ta.

Fără cutii urâte.

Fără granițe ciudate.

Alertele tale plutesc în mod natural peste joc sau cameră.

Și fluxul tău arată instantaneu mai curat.

Mic detaliu. Mare diferență.

Gânduri finale

Transparența unei surse de browser în OBS Studio nu este complicată.

Se simte doar misterios la început.

Amintiți-vă regula de aur:

Transparența trebuie să vină de la site-ul propriu-zis.

OBS va afișa exact ceea ce iese pagina. Nimic mai mult. Nimic mai puțin.

Odată ce CSS-ul tău folosește un fundal transparent, OBS face magia automat.

Acum, curățați acele suprapuneri.

Fluxul tău merită.