Cara Membuat Sumber Browser Transparan di OBS Studio

Diterbitkan: 2026-02-19

Jadi Anda menambahkan sumber browser di OBS Studio. Bagus. Tapi sekarang Anda melihat kotak jelek berwarna putih atau hitam di sekitarnya. Tidak bagus. Jangan khawatir. Menjadikan sumber browser Anda transparan di OBS lebih mudah dari yang Anda kira. Anda hanya perlu pengaturan yang tepat. Dan mungkin satu atau dua perubahan kecil.

TLDR: Untuk membuat sumber browser transparan di OBS Studio, halaman web Anda harus memiliki latar belakang transparan, dan OBS tidak boleh memaksakan warna latar belakang. Atur latar belakang halaman menjadi transparan di properti sumber browser. Jika perlu, edit CSS overlay Anda untuk menggunakan background: transparan; . Setelah selesai, hamparan Anda akan menyatu sempurna dengan aliran Anda.

Pertama, Apa Itu Sumber Browser?

Sumber browser di OBS adalah browser web mini bawaan. Ini memuat situs web langsung ke dalam adegan Anda. Ini sempurna untuk:

  • Peringatan streaming
  • Hamparan obrolan
  • Daftar acara
  • Widget HTML khusus
  • Label aliran

Alih-alih menangkap layar situs web, OBS memuatnya secara langsung. Itu membuatnya bersih dan tajam. Namun transparansi hanya berfungsi jika situs web itu sendiri mengizinkannya.

Itulah ide kuncinya. OBS tidak bisa secara ajaib menghapus latar belakang yang dimasukkan ke dalam halaman.

Langkah 1: Tambahkan Sumber Browser di OBS

Jika Anda belum melakukannya, mari kita mulai dari awal.

  1. Buka OBS Studio.
  2. Buka panel Sumber Anda.
  3. Klik tombol + .
  4. Pilih Peramban .
  5. Beri nama sesuka Anda.
  6. Klik Oke .

Sekarang rekatkan URL Anda ke bidang URL. Atur lebar dan tinggi jika diperlukan. Lalu klik oke.

Anda sekarang akan melihat sumber browser Anda muncul di jendela pratinjau.

Jika ada latar belakang yang kuat, teruslah membaca.

Gambar tidak ditemukan di postmeta

Langkah 2: Pastikan Latar Belakang Situs Transparan

Ini adalah langkah yang paling penting.

Halaman overlay Anda harus memiliki latar belakang transparan. Jika halaman menggunakan warna putih, hitam, atau warna solid apa pun, OBS akan menampilkannya.

Jika Anda mengontrol HTML atau CSS, tambahkan ini:

tubuh {
  latar belakang: transparan;
}

Atau bahkan lebih baik:

html, isi {
  warna latar belakang: rgba(0, 0, 0, 0);
}

Hal ini memaksa adanya transparansi penuh.

Jika Anda menggunakan layanan peringatan atau overlay pihak ketiga, lihat ke dalam pengaturannya. Banyak yang memiliki kotak centang yang mengatakan sesuatu seperti:

  • Aktifkan Latar Belakang Transparan
  • Nonaktifkan Latar Belakang
  • CSS khusus

Aktifkan jika tersedia.

Jika tidak, periksa apakah Anda dapat memasukkan CSS khusus. Itu biasanya menyelesaikannya.

Langkah 3: Periksa Pengaturan Sumber Browser OBS

Klik kanan sumber browser Anda di OBS.

Pilih Properti .

Sekarang perhatikan baik-baik pengaturannya.

Memastikan:

  • URL yang benar telah ditempel.
  • Lebar dan Tinggi sesuai dengan ukuran overlay Anda.
  • Jika ada kotak Custom CSS , tidak memaksakan warna background.

Jika Anda melihat bidang CSS khusus, Anda juga dapat menambahkan:

body { warna latar: rgba(0,0,0,0) !penting; }

Klik OK setelah perubahan.

Jika semuanya sudah diatur dengan benar, latar belakang akan hilang.

Masalah Umum: Latar Belakang Putih Masih Terlihat

Ini sering terjadi.

Inilah alasannya:

  • Situs web ini memiliki latar belakang putih default.
  • CSS tidak diterapkan dengan benar.
  • Platform overlay memaksa penataan gaya.

Perbaikan cepat:

  1. Refresh sumber browser (klik kanan → Refresh).
  2. Mulai ulang OBS.
  3. Hapus cache browser (di dalam properti sumber browser).

Ya, cache dapat menyebabkan masalah. Apalagi setelah mengganti CSS.

Tip Bonus: Gunakan PNG dan WebM untuk Transparansi

Jika sumber browser Anda menampilkan gambar atau animasi, pastikan sumber tersebut mendukung transparansi.

Format terbaik:

  • PNG untuk gambar
  • WebM dengan saluran alfa untuk video
  • GIF (kualitas terbatas, tetapi berfungsi)

Jika Anda menggunakan MP4, transparansi tidak akan berfungsi. MP4 tidak mendukung saluran alfa.

Ini bukan masalah OBS. Ini adalah batasan format.

Bagaimana Jika Anda Tidak Dapat Mengedit Situs Web?

Terkadang Anda tidak mengontrol halaman.

Mungkin itu widget. Atau alat pihak ketiga tanpa opsi CSS.

Anda masih memiliki pilihan.

Opsi 1: Gunakan Kunci Chroma

Jika latar belakangnya berwarna hijau terang atau warna solid lainnya, Anda dapat menghapusnya.

  1. Klik kanan sumber browser.
  2. Pilih Filter .
  3. Klik + .
  4. Pilih Kunci Chroma .

Sesuaikan pengaturan hingga latar belakang menghilang.

Ini berfungsi paling baik dengan latar belakang hijau terang.

Tapi itu tidak sempurna. Detail halus bisa terganggu.

Gambar tidak ditemukan di postmeta

Opsi 2: Pangkas

Tahan ALT sambil menyeret tepi sumber di OBS.

Ini memotong bagian bingkai.

Anda dapat menyembunyikan tepi latar belakang yang tidak diinginkan dengan cara ini.

Sederhana saja. Dan cepat.

Metode Lanjutan: Untuk Hamparan HTML Khusus

Jika Anda membuat overlay sendiri, transparansi menjadi mudah.

Mulai HTML Anda seperti ini:

<!DOCTYPEhtml>
<html>
<kepala>
<gaya>
  html, isi {
    margin: 0;
    bantalan: 0;
    latar belakang: transparan;
    meluap: tersembunyi;
  }
</gaya>
</kepala>
<tubuh>

<!-- Konten Anda di sini -->

</tubuh>
</html>

Ini menghilangkan margin dan memastikan halaman tetap bersih dan transparan sepenuhnya.

Hindari juga menambahkan:

  • Gambar latar belakang
  • Gradien latar belakang
  • Warna tema default

Jaga agar tetap minimal.

OBS akan menangani sisanya.

Kiat Kinerja

Transparansi sangat bagus. Tapi sumber browser bisa menggunakan CPU.

Jaga semuanya tetap lancar:

  • Gunakan dimensi overlay kecil.
  • Nonaktifkan animasi yang tidak perlu.
  • Turunkan kecepatan bingkai jika tidak diperlukan.
  • Hindari JavaScript yang berat.

Jika overlaynya lambat, ini mungkin bukan masalah transparansi. Ini mungkin terlalu rumit.

Daftar Periksa Transparansi Cepat

Jika ada sesuatu yang tidak berfungsi, lihat daftar ini:

  • Apakah latar belakang situs web disetel ke transparan?
  • Apakah Anda menggunakan background: transparan; di CSS?
  • Apakah Anda menyegarkan sumbernya?
  • Apakah Anda menghapus cache?
  • Apakah format gambar mendukung transparansi?
  • Apakah OBS mutakhir?

Sebagian besar masalah diselesaikan dalam waktu kurang dari lima menit.

Mengapa Transparansi Itu Penting

Hamparan transparan terlihat profesional.

Mereka menyatu dengan adegan Anda.

Tidak ada kotak jelek.

Tidak ada batas yang aneh.

Peringatan Anda muncul secara alami di gameplay atau kamera.

Dan streaming Anda langsung terlihat lebih bersih.

Detil kecil. Perbedaan besar.

Pikiran Terakhir

Membuat sumber browser transparan di OBS Studio tidaklah rumit.

Awalnya terasa misterius.

Ingat aturan emas:

Transparansi harus datang dari website itu sendiri.

OBS akan menampilkan dengan tepat apa yang dihasilkan halaman tersebut. Tidak lebih. Tidak kurang.

Setelah CSS Anda menggunakan latar belakang transparan, OBS akan melakukan keajaiban secara otomatis.

Sekarang bersihkan overlay itu.

Aliran Anda layak mendapatkannya.