Come rendere trasparente l'origine del browser in OBS Studio

Pubblicato: 2026-02-19

Quindi hai aggiunto una fonte browser in OBS Studio. Carino. Ma ora vedi una brutta scatola bianca o nera attorno ad esso. Non carino. Non preoccuparti. Rendere trasparente l'origine del tuo browser in OBS è più semplice di quanto pensi. Hai solo bisogno delle giuste impostazioni. E forse una o due piccole modifiche.

TLDR: per rendere trasparente l'origine del browser in OBS Studio, la tua pagina Web deve avere uno sfondo trasparente e OBS non deve forzare un colore di sfondo. Imposta lo sfondo della pagina su trasparente nelle proprietà di origine del browser. Se necessario, modifica il CSS del tuo overlay per utilizzare background: trasparente; . Una volta terminato, il tuo overlay si fonderà perfettamente con il tuo stream.

Innanzitutto, cos'è una sorgente del browser?

Una fonte del browser in OBS è un mini browser Web integrato. Carica i siti Web direttamente nella tua scena. Questo è perfetto per:

  • Avvisi in streaming
  • Sovrapposizioni di chat
  • Elenchi eventi
  • Widget HTML personalizzati
  • Etichette in streaming

Invece di catturare lo schermo di un sito Web, OBS lo carica direttamente. Ciò lo rende pulito e nitido. Ma la trasparenza funziona solo se il sito stesso lo consente.

Questa è l'idea chiave. OBS non può rimuovere magicamente uno sfondo inserito nella pagina.

Passaggio 1: aggiungi una sorgente browser in OBS

Se non l'hai già fatto, cominciamo da zero.

  1. Apri OBSStudio.
  2. Vai al pannello Fonti .
  3. Fare clic sul pulsante + .
  4. Seleziona Navigatore .
  5. Chiamalo come preferisci.
  6. Fare clic su OK .

Ora incolla il tuo URL nel campo URL. Imposta larghezza e altezza se necessario. Quindi fare clic su OK.

Ora dovresti vedere la sorgente del tuo browser apparire nella finestra di anteprima.

Se c'è un background solido, continua a leggere.

Immagine non trovata in postmeta

Passaggio 2: assicurati che lo sfondo del sito Web sia trasparente

Questo è il passo più importante.

La tua pagina in sovrapposizione deve avere uno sfondo trasparente. Se la pagina utilizza il bianco, il nero o qualsiasi colore a tinta unita, OBS lo mostrerà.

Se controlli l'HTML o il CSS, aggiungi questo:

corpo {
  sfondo: trasparente;
}

O ancora meglio:

html, corpo {
  colore di sfondo: rgba(0, 0, 0, 0);
}

Ciò impone la piena trasparenza.

Se utilizzi un servizio di avviso o overlay di terze parti, controlla le sue impostazioni. Molti hanno una casella di controllo che dice qualcosa del tipo:

  • Abilita Sfondo trasparente
  • Disabilita sfondo
  • CSS personalizzato

Accendilo se disponibile.

In caso contrario, controlla se puoi inserire CSS personalizzati. Questo di solito risolve tutto.

Passaggio 3: controlla le impostazioni della sorgente del browser OBS

Fai clic con il pulsante destro del mouse sull'origine del browser in OBS.

Seleziona Proprietà .

Ora guarda attentamente le impostazioni.

Assicurarsi:

  • Viene incollato l' URL corretto.
  • La larghezza e l'altezza corrispondono alle dimensioni della sovrapposizione.
  • Se è presente una casella CSS personalizzata , non forza un colore di sfondo.

Se vedi un campo CSS personalizzato, puoi anche aggiungere:

corpo { colore-sfondo: rgba(0,0,0,0) !importante; }

Fare clic su OK dopo le modifiche.

Se tutto è impostato correttamente, lo sfondo dovrebbe scomparire.

Problema comune: lo sfondo bianco è ancora visibile

Questo succede spesso.

Ecco perché:

  • Il sito Web ha uno sfondo bianco predefinito.
  • Il CSS non è stato applicato correttamente.
  • La piattaforma sovrapposta impone lo styling.

Soluzioni rapide:

  1. Aggiorna la sorgente del browser (tasto destro del mouse → Aggiorna).
  2. Riavvia l'OBS.
  3. Svuota la cache del browser (all'interno delle proprietà dell'origine del browser).

Sì, la cache può causare problemi. Soprattutto dopo aver cambiato CSS.

Suggerimento bonus: utilizza PNG e WebM per la trasparenza

Se la sorgente del tuo browser visualizza immagini o animazioni, assicurati che supportino la trasparenza.

I migliori formati:

  • PNG per le immagini
  • WebM con canale alfa per video
  • GIF (qualità limitata, ma funziona)

Se usi MP4, la trasparenza non funzionerà. MP4 non supporta i canali alfa.

Questo non è un problema di OBS. È una limitazione del formato.

Cosa succede se non riesci a modificare il sito web?

A volte non controlli la pagina.

Forse è un widget. Oppure uno strumento di terze parti senza opzioni CSS.

Hai ancora delle opzioni.

Opzione 1: utilizzare una chiave cromatica

Se lo sfondo è verde brillante o di un altro colore a tinta unita, puoi rimuoverlo.

  1. Fare clic con il pulsante destro del mouse sull'origine del browser.
  2. Seleziona Filtri .
  3. Fare clic su + .
  4. Scegli Chiave cromatica .

Regola le impostazioni finché lo sfondo non scompare.

Funziona meglio con sfondi verde brillante.

Ma non è perfetto. I dettagli fini possono soffrire.

Immagine non trovata in postmeta

Opzione 2: ritaglialo

Tieni premuto ALT mentre trascini i bordi della fonte in OBS.

Questo ritaglia parti del fotogramma.

In questo modo puoi nascondere i bordi dello sfondo indesiderati.

È semplice. E veloce.

Metodo avanzato: per sovrapposizioni HTML personalizzate

Se crei le tue sovrapposizioni, la trasparenza è facile.

Inizia il tuo HTML in questo modo:

<!DOCTYPEhtml>
<html>
<testa>
<stile>
  html, corpo {
    margine: 0;
    imbottitura: 0;
    sfondo: trasparente;
    overflow: nascosto;
  }
</stile>
</testa>
<corpo>

<!-- Il tuo contenuto qui -->

</corpo>
</html>

Ciò rimuove i margini e garantisce che la pagina rimanga pulita e completamente trasparente.

Evita anche di aggiungere:

  • Immagini di sfondo
  • Sfumature di sfondo
  • Colori del tema predefiniti

Mantienilo al minimo.

OBS si occuperà del resto.

Suggerimenti sulle prestazioni

La trasparenza è fantastica. Ma le origini del browser possono utilizzare la CPU.

Mantieni le cose lisce:

  • Utilizzare dimensioni di sovrapposizione piccole.
  • Disattiva le animazioni non necessarie.
  • Frequenza fotogrammi inferiore se non necessario.
  • Evita JavaScript pesante.

Se una sovrapposizione presenta ritardi, potrebbe non trattarsi di un problema di trasparenza. Potrebbe essere semplicemente troppo complesso.

Elenco di controllo rapido per la trasparenza

Se qualcosa non funziona, consulta questo elenco:

  • Lo sfondo del sito web è impostato su trasparente?
  • Hai usato lo sfondo: trasparente; nei CSS?
  • Hai aggiornato la fonte?
  • Hai svuotato la cache?
  • I formati immagine supportano la trasparenza?
  • OBS è aggiornato?

La maggior parte dei problemi vengono risolti in meno di cinque minuti.

Perché la trasparenza è importante

Le sovrapposizioni trasparenti sembrano professionali.

Si fondono nella tua scena.

Nessuna scatola brutta.

Nessun confine strano.

I tuoi avvisi fluttuano in modo naturale sul gameplay o sulla fotocamera.

E il tuo streaming apparirà immediatamente più pulito.

Piccolo dettaglio. Grande differenza.

Considerazioni finali

Rendere trasparente l'origine del browser in OBS Studio non è complicato.

All'inizio sembra semplicemente misterioso.

Ricorda la regola d'oro:

La trasparenza deve provenire dal sito stesso.

OBS mostrerà esattamente ciò che viene restituito dalla pagina. Niente di più. Niente di meno.

Una volta che il tuo CSS utilizza uno sfondo trasparente, OBS fa la magia automaticamente.

Ora vai a ripulire quelle sovrapposizioni.

Il tuo streaming se lo merita.