Comment rendre la source du navigateur transparente dans OBS Studio

Publié: 2026-02-19

Vous avez donc ajouté une source de navigateur dans OBS Studio. Bon. Mais maintenant, vous voyez une vilaine boîte blanche ou noire autour. Pas sympa. Ne t'inquiète pas. Rendre la source de votre navigateur transparente dans OBS est plus facile que vous ne le pensez. Vous avez juste besoin des bons réglages. Et peut-être un ou deux petits ajustements.

TLDR : Pour rendre une source de navigateur transparente dans OBS Studio, votre page Web doit avoir un arrière-plan transparent et OBS ne doit pas forcer une couleur d'arrière-plan. Définissez l'arrière-plan de la page sur transparent dans les propriétés de la source du navigateur. Si nécessaire, modifiez le CSS de votre superposition pour utiliser background: transparent; . Une fois terminé, votre superposition se fondra proprement dans votre flux.

Tout d’abord, qu’est-ce qu’une source de navigateur ?

Une source de navigateur dans OBS est un mini navigateur Web intégré. Il charge les sites Web directement dans votre scène. C'est parfait pour :

  • Alertes de flux
  • Superpositions de chat
  • Listes d'événements
  • Widgets HTML personnalisés
  • Étiquettes de flux

Au lieu de capturer l’écran d’un site Web, OBS le charge directement. Cela le rend propre et net. Mais la transparence ne fonctionne que si le site Web lui-même le permet.

C'est l'idée clé. OBS ne peut pas supprimer comme par magie un arrière-plan intégré à la page.

Étape 1 : Ajouter une source de navigateur dans OBS

Si ce n’est pas déjà fait, recommençons à zéro.

  1. Ouvrez OBS Studio.
  2. Accédez à votre panneau Sources .
  3. Cliquez sur le bouton + .
  4. Sélectionnez Navigateur .
  5. Nommez-le comme vous voulez.
  6. Cliquez sur OK .

Collez maintenant votre URL dans le champ URL. Réglez la largeur et la hauteur si nécessaire. Cliquez ensuite sur OK.

Vous devriez maintenant voir la source de votre navigateur apparaître dans la fenêtre d'aperçu.

S'il existe une solide expérience, continuez à lire.

Image introuvable dans postmeta

Étape 2 : Assurez-vous que l’arrière-plan du site Web est transparent

C'est l'étape la plus importante.

Votre page de superposition doit avoir un fond transparent. Si la page utilise du blanc, du noir ou toute autre couleur unie, OBS l'affichera.

Si vous contrôlez le HTML ou le CSS, ajoutez ceci :

corps {
  fond : transparent ;
}

Ou encore mieux :

html, corps {
  couleur d'arrière-plan : rgba(0, 0, 0, 0);
}

Cela impose une transparence totale.

Si vous utilisez un service d'alerte ou de superposition tiers, consultez ses paramètres. Beaucoup ont une case à cocher qui dit quelque chose comme :

  • Activer l'arrière-plan transparent
  • Désactiver l'arrière-plan
  • CSS personnalisé

Allumez-le si disponible.

Sinon, vérifiez si vous pouvez injecter du CSS personnalisé. Cela résout généralement le problème.

Étape 3 : Vérifiez les paramètres source du navigateur OBS

Cliquez avec le bouton droit sur la source de votre navigateur dans OBS.

Sélectionnez Propriétés .

Maintenant, regardez attentivement les paramètres.

S'assurer:

  • L' URL correcte est collée.
  • La largeur et la hauteur correspondent à la taille de votre superposition.
  • S'il existe une zone CSS personnalisée , elle n'impose pas de couleur d'arrière-plan.

Si vous voyez un champ CSS personnalisé, vous pouvez également ajouter :

corps { couleur d'arrière-plan : rgba(0,0,0,0) !important; }

Cliquez sur OK après les modifications.

Si tout est correctement réglé, l'arrière-plan devrait disparaître.

Problème courant : le fond blanc s'affiche toujours

Cela arrive souvent.

Voici pourquoi :

  • Le site Web a un fond blanc par défaut.
  • Le CSS n'a pas été appliqué correctement.
  • La plateforme superposée force le style.

Corrections rapides :

  1. Actualisez la source du navigateur (clic droit → Actualiser).
  2. Redémarrez OBS.
  3. Videz le cache du navigateur (dans les propriétés de la source du navigateur).

Oui, le cache peut causer des problèmes. Surtout après avoir changé CSS.

Astuce bonus : utilisez PNG et WebM pour la transparence

Si la source de votre navigateur affiche des images ou des animations, assurez-vous qu'elles prennent en charge la transparence.

Meilleurs formats :

  • PNG pour les images
  • WebM avec canal alpha pour la vidéo
  • GIF (qualité limitée, mais fonctionne)

Si vous utilisez MP4, la transparence ne fonctionnera pas. MP4 ne prend pas en charge les canaux alpha.

Ce n'est pas un problème OBS. C'est une limitation de format.

Que faire si vous ne pouvez pas modifier le site Web ?

Parfois, vous ne contrôlez pas la page.

C'est peut-être un widget. Ou un outil tiers sans options CSS.

Vous avez encore des options.

Option 1 : utiliser une clé Chroma

Si l’arrière-plan est vert vif ou d’une autre couleur unie, vous pouvez le supprimer.

  1. Cliquez avec le bouton droit sur la source du navigateur.
  2. Sélectionnez Filtres .
  3. Cliquez sur + .
  4. Choisissez Clé Chroma .

Ajustez les paramètres jusqu'à ce que l'arrière-plan disparaisse.

Cela fonctionne mieux avec des arrière-plans vert vif.

Mais ce n'est pas parfait. Les détails fins peuvent en souffrir.

Image introuvable dans postmeta

Option 2 : recadrez-le

Maintenez ALT tout en faisant glisser les bords de la source dans OBS.

Cela recadre certaines parties du cadre.

Vous pouvez ainsi masquer les bords d’arrière-plan indésirables.

C'est simple. Et vite.

Méthode avancée : pour les superpositions HTML personnalisées

Si vous créez vos propres superpositions, la transparence est simple.

Commencez votre HTML comme ceci :

<!DOCTYPEhtml>
<html>
<tête>
<style>
  html, corps {
    marge : 0 ;
    remplissage : 0 ;
    fond : transparent ;
    débordement : caché ;
  }
</style>
</tête>
<corps>

<!-- Votre contenu ici -->

</corps>
</html>

Cela supprime les marges et garantit que la page reste propre et entièrement transparente.

Évitez également d'ajouter :

  • Images d'arrière-plan
  • Dégradés d'arrière-plan
  • Couleurs du thème par défaut

Gardez-le au minimum.

OBS s'occupera du reste.

Conseils de performances

La transparence est géniale. Mais les sources du navigateur peuvent utiliser le processeur.

Gardez les choses fluides :

  • Utilisez de petites dimensions de superposition.
  • Désactivez les animations inutiles.
  • Réduisez la fréquence d’images si cela n’est pas nécessaire.
  • Évitez le JavaScript lourd.

Si une superposition est en retard, ce n'est peut-être pas un problème de transparence. C'est peut-être trop complexe.

Liste de contrôle rapide pour la transparence

Si quelque chose ne fonctionne pas, parcourez cette liste :

  • L’arrière-plan du site Web est-il transparent ?
  • Avez-vous utilisé background: transparent; en CSS ?
  • As-tu rafraîchi la source ?
  • Avez-vous vidé le cache ?
  • Les formats d’image prennent-ils en charge la transparence ?
  • OBS est-il à jour ?

La plupart des problèmes sont résolus en moins de cinq minutes.

Pourquoi la transparence est importante

Les superpositions transparentes ont un aspect professionnel.

Ils se fondent dans votre scène.

Pas de boîtes laides.

Pas de frontières bizarres.

Vos alertes flottent naturellement sur le gameplay ou la caméra.

Et votre flux paraît instantanément plus propre.

Petit détail. Grande différence.

Pensées finales

Rendre une source de navigateur transparente dans OBS Studio n'est pas compliqué.

Cela semble mystérieux au début.

N'oubliez pas la règle d'or :

La transparence doit venir du site Web lui-même.

OBS affichera exactement ce que la page affiche. Rien de plus. Rien de moins.

Une fois que votre CSS utilise un arrière-plan transparent, OBS fait automatiquement la magie.

Maintenant, allez nettoyer ces superpositions.

Votre stream le mérite.