كيفية جعل مصدر المتصفح شفافًا في OBS Studio

نشرت: 2026-02-19

لذا قمت بإضافة مصدر متصفح في OBS Studio. لطيف - جيد. لكنك الآن ترى صندوقًا أبيض أو أسودًا قبيحًا حوله. ليس لطيفا. لا تقلق. يعد جعل مصدر المتصفح الخاص بك شفافًا في OBS أسهل مما تعتقد. أنت فقط بحاجة إلى الإعدادات الصحيحة. وربما واحد أو اثنين من التعديلات الصغيرة.

TLDR: لجعل مصدر المتصفح شفافًا في OBS Studio، يجب أن تحتوي صفحة الويب الخاصة بك على خلفية شفافة، ويجب ألا يفرض OBS لون الخلفية. قم بتعيين خلفية الصفحة إلى شفافة في خصائص مصدر المتصفح. إذا لزم الأمر، قم بتحرير CSS للتراكب الخاص بك لاستخدام الخلفية: شفافة؛ . بمجرد الانتهاء من ذلك، سيتم دمج التراكب الخاص بك بشكل نظيف مع التدفق الخاص بك.

أولاً، ما هو مصدر المتصفح؟

مصدر المتصفح في OBS هو متصفح ويب صغير مدمج. يقوم بتحميل مواقع الويب مباشرة إلى المشهد الخاص بك. هذا مثالي لـ:

  • تنبيهات الدفق
  • تراكبات الدردشة
  • قوائم الأحداث
  • عناصر واجهة مستخدم HTML المخصصة
  • تسميات الدفق

بدلاً من التقاط شاشة موقع ويب، يقوم OBS بتحميله مباشرةً. وهذا يجعلها نظيفة وحادة. لكن الشفافية لا تعمل إلا إذا كان الموقع نفسه يسمح بذلك.

هذه هي الفكرة الأساسية. لا يستطيع OBS إزالة الخلفية الموجودة في الصفحة بطريقة سحرية.

الخطوة 1: إضافة مصدر المتصفح في OBS

إذا لم تكن قد قمت بذلك بالفعل، فلنبدأ من الصفر.

  1. افتح استوديو أو بي إس.
  2. انتقل إلى لوحة المصادر الخاصة بك.
  3. انقر فوق الزر + .
  4. حدد المتصفح .
  5. سمها ما شئت
  6. انقر فوق موافق .

الآن قم بلصق عنوان URL الخاص بك في حقل عنوان URL. اضبط العرض والارتفاع إذا لزم الأمر. ثم انقر فوق موافق.

يجب أن تشاهد الآن مصدر متصفحك يظهر في نافذة المعاينة.

إذا كانت هناك خلفية صلبة، استمر في القراءة.

الصورة غير موجودة في postmeta

الخطوة 2: تأكد من أن خلفية موقع الويب شفافة

هذه هي الخطوة الأكثر أهمية.

يجب أن تحتوي صفحة التراكب الخاصة بك على خلفية شفافة. إذا كانت الصفحة تستخدم اللون الأبيض أو الأسود أو أي لون خالص، فسوف يعرضه OBS.

إذا كنت تتحكم في HTML أو CSS، أضف هذا:

جسم {
  الخلفية: شفافة؛
}

أو حتى أفضل:

أتش تي أم أل، الجسم {
  لون الخلفية: rgba(0, 0, 0, 0);
}

وهذا يفرض الشفافية الكاملة.

إذا كنت تستخدم تنبيهًا أو خدمة تراكب تابعة لجهة خارجية، فابحث داخل إعداداتها. لدى العديد منها مربع اختيار يقول شيئًا مثل:

  • تمكين الخلفية الشفافة
  • تعطيل الخلفية
  • CSS مخصص

قم بتشغيله إذا كان متاحًا.

إذا لم يكن الأمر كذلك، فتحقق مما إذا كان بإمكانك إدخال CSS مخصص. هذا عادة ما يحلها.

الخطوة 3: تحقق من إعدادات مصدر متصفح OBS

انقر بزر الماوس الأيمن فوق مصدر المتصفح الخاص بك في OBS.

حدد خصائص .

الآن انظر بعناية إلى الإعدادات.

تأكد:

  • تم لصق عنوان URL الصحيح.
  • العرض والارتفاع يتطابقان مع حجم التراكب الخاص بك.
  • إذا كان هناك مربع CSS مخصص ، فلن يفرض لون الخلفية.

إذا رأيت حقل CSS مخصصًا، فيمكنك أيضًا إضافة:

الجسم { لون الخلفية: rgba (0،0،0،0)! مهم؛ }

انقر فوق موافق بعد التغييرات.

إذا تم ضبط كل شيء بشكل صحيح، يجب أن تختفي الخلفية.

مشكلة شائعة: لا تزال الخلفية البيضاء تظهر

يحدث هذا كثيرًا.

إليكم السبب:

  • يحتوي الموقع على خلفية بيضاء افتراضية.
  • لم يتم تطبيق CSS بشكل صحيح.
  • منصة التراكب تفرض التصميم.

إصلاحات سريعة:

  1. قم بتحديث مصدر المتصفح (انقر بزر الماوس الأيمن → تحديث).
  2. أعد تشغيل برنامج OBS.
  3. امسح ذاكرة التخزين المؤقت للمتصفح (داخل خصائص مصدر المتصفح).

نعم، يمكن أن تسبب ذاكرة التخزين المؤقت مشكلات. خاصة بعد تغيير CSS.

نصيحة إضافية: استخدم PNG وWebM للشفافية

إذا كان مصدر المتصفح لديك يعرض صورًا أو رسومًا متحركة، فتأكد من أنها تدعم الشفافية.

أفضل التنسيقات:

  • PNG للصور
  • WebM مع قناة ألفا للفيديو
  • GIF (جودة محدودة، ولكنها تعمل)

إذا كنت تستخدم MP4، فلن تعمل الشفافية. MP4 لا يدعم قنوات ألفا.

هذه ليست مشكلة OBS. إنه قيود على التنسيق.

ماذا لو لم تتمكن من تحرير الموقع؟

في بعض الأحيان لا يمكنك التحكم في الصفحة.

ربما هو القطعة. أو أداة خارجية لا تحتوي على خيارات CSS.

لا يزال لديك خيارات.

الخيار 1: استخدم مفتاح Chroma

إذا كانت الخلفية خضراء زاهية أو لونًا ثابتًا آخر، فيمكنك إزالتها.

  1. انقر بزر الماوس الأيمن على مصدر المتصفح.
  2. حدد عوامل التصفية .
  3. انقر فوق + .
  4. اختر مفتاح كروما .

اضبط الإعدادات حتى تختفي الخلفية.

يعمل هذا بشكل أفضل مع الخلفيات الخضراء الزاهية.

لكنها ليست مثالية. التفاصيل الدقيقة يمكن أن تعاني.

الصورة غير موجودة في postmeta

الخيار 2: قصه

اضغط مع الاستمرار على ALT أثناء سحب حواف المصدر في OBS.

يؤدي هذا إلى اقتصاص أجزاء من الإطار.

يمكنك إخفاء حواف الخلفية غير المرغوب فيها بهذه الطريقة.

انها بسيطة. وسريع.

الطريقة المتقدمة: لتراكبات HTML المخصصة

إذا قمت بإنشاء تراكبات خاصة بك، فستكون الشفافية أمرًا سهلاً.

ابدأ HTML الخاص بك مثل هذا:

<!DOCTYPE html>
<أتش تي أم أل>
<الرأس>
<نمط>
  أتش تي أم أل، الجسم {
    الهامش: 0;
    الحشو: 0؛
    الخلفية: شفافة؛
    الفائض: مخفي؛
  }
</نمط>
</الرأس>
<الجسم>

<!-- المحتوى الخاص بك هنا -->

</الجسم>
</html>

يؤدي هذا إلى إزالة الهوامش ويضمن بقاء الصفحة نظيفة وشفافة تمامًا.

تجنب أيضًا إضافة:

  • صور الخلفية
  • تدرجات الخلفية
  • ألوان السمة الافتراضية

يبقيه الحد الأدنى.

سوف يقوم OBS بالتعامل مع الباقي.

نصائح الأداء

الشفافية عظيمة. لكن مصادر المتصفح يمكنها استخدام وحدة المعالجة المركزية.

اجعل الأمور سلسة:

  • استخدم أبعاد تراكب صغيرة.
  • تعطيل الرسوم المتحركة غير الضرورية.
  • انخفاض معدل الإطار إذا لم تكن هناك حاجة إليه.
  • تجنب جافا سكريبت الثقيلة.

إذا تأخر التراكب، فقد لا يكون ذلك مشكلة تتعلق بالشفافية. قد يكون الأمر معقدًا للغاية.

قائمة التحقق السريعة من الشفافية

إذا لم يعمل شيء ما، فانتقل إلى هذه القائمة:

  • هل تم ضبط خلفية الموقع على الشفافية؟
  • هل استخدمت الخلفية: شفافة؛ في CSS؟
  • هل قمت بتحديث المصدر ؟
  • هل قمت بمسح ذاكرة التخزين المؤقت؟
  • هل تنسيقات الصور تدعم الشفافية؟
  • هل OBS محدث؟

يتم حل معظم المشاكل في أقل من خمس دقائق.

لماذا تعتبر الشفافية مهمة؟

تبدو التراكبات الشفافة احترافية.

أنها تمتزج مع المشهد الخاص بك.

لا توجد صناديق قبيحة.

لا حدود غريبة.

تطفو تنبيهاتك بشكل طبيعي فوق طريقة اللعب أو الكاميرا.

وسيبدو تيارك أكثر نظافة على الفور.

تفاصيل صغيرة. فرق كبير.

الأفكار النهائية

إن جعل مصدر المتصفح شفافًا في OBS Studio ليس أمرًا معقدًا.

يبدو الأمر غامضًا في البداية.

تذكر القاعدة الذهبية:

الشفافية يجب أن تأتي من الموقع نفسه.

سيعرض OBS بالضبط ما تخرجه الصفحة. لا شيء أكثر. لا شيء أقل.

بمجرد أن يستخدم CSS خلفية شفافة، يقوم OBS بتنفيذ المهمة تلقائيًا.

اذهب الآن لتنظيف تلك التراكبات.

تيار الخاص بك يستحق ذلك.