Как сделать исходный код браузера прозрачным в OBS Studio

Опубликовано: 2026-02-19

Итак, вы добавили исходный код браузера в OBS Studio. Хороший. Но теперь вы видите вокруг него уродливый белый или черный ящик. Нехорошо. Не волнуйся. Сделать исходный код вашего браузера прозрачным в OBS проще, чем вы думаете. Вам просто нужны правильные настройки. И, возможно, одна или две небольшие поправки.

TLDR: Чтобы сделать исходный код браузера прозрачным в OBS Studio, ваша веб-страница должна иметь прозрачный фон, и OBS не должен принудительно использовать цвет фона. Установите прозрачный фон страницы в свойствах источника браузера. При необходимости отредактируйте CSS вашего наложения, чтобы использовать фон: прозрачный; . После этого ваш наложение будет четко сливаться с вашим потоком.

Во-первых, что такое источник браузера?

Исходный код браузера в OBS — это встроенный мини-веб-браузер. Он загружает веб-сайты прямо в вашу сцену. Это идеально подходит для:

  • Оповещения о потоке
  • Оверлеи чата
  • Списки событий
  • Пользовательские HTML-виджеты
  • Метки потока

Вместо того, чтобы делать снимки экрана веб-сайта, OBS загружает его напрямую. Это делает его чистым и острым. Но прозрачность работает только в том случае, если это позволяет сам сайт.

Это ключевая идея. OBS не может волшебным образом удалить фон, встроенный в страницу.

Шаг 1. Добавьте источник браузера в OBS

Если вы еще этого не сделали, давайте начнем с нуля.

  1. Откройте OBS Studio.
  2. Перейдите на панель «Источники» .
  3. Нажмите кнопку + .
  4. Выберите Браузер .
  5. Назовите его как хотите.
  6. Нажмите ОК .

Теперь вставьте свой URL-адрес в поле URL-адреса. При необходимости установите ширину и высоту. Затем нажмите ОК.

Теперь вы должны увидеть источник вашего браузера в окне предварительного просмотра.

Если есть солидный фон, продолжайте читать.

Изображение не найдено в постмете

Шаг 2. Убедитесь, что фон веб-сайта прозрачный

Это самый важный шаг.

Ваша страница наложения должна иметь прозрачный фон. Если на странице используется белый, черный или любой сплошной цвет, OBS отобразит это.

Если вы управляете HTML или CSS, добавьте это:

тело {
  фон: прозрачный;
}

Или еще лучше:

HTML, тело {
  цвет фона: rgba(0, 0, 0, 0);
}

Это обеспечивает полную прозрачность.

Если вы используете стороннюю службу оповещений или наложений, загляните в их настройки. У многих есть флажок, в котором написано что-то вроде:

  • Включить прозрачный фон
  • Отключить фон
  • Пользовательский CSS

Включите его, если он доступен.

Если нет, проверьте, можете ли вы внедрить собственный CSS. Обычно это решает проблему.

Шаг 3. Проверьте исходные настройки браузера OBS.

Щелкните правой кнопкой мыши источник браузера в OBS.

Выберите Свойства .

Теперь внимательно посмотрите настройки.

Убеждаться:

  • Вставлен правильный URL-адрес .
  • Ширина и высота соответствуют размеру наложения.
  • Если есть поле «Пользовательский CSS» , оно не требует использования цвета фона.

Если вы видите настраиваемое поле CSS, вы также можете добавить:

body { цвет фона: rgba(0,0,0,0) !important; }

Нажмите «ОК» после изменений.

Если все настроено правильно, фон должен исчезнуть.

Распространенная проблема: белый фон все еще отображается

Это случается часто.

Вот почему:

  • По умолчанию на сайте установлен белый фон.
  • CSS был применен неправильно.
  • Накладная платформа усиливает стиль.

Быстрые исправления:

  1. Обновите исходный код браузера (щелкните правой кнопкой мыши → Обновить).
  2. Перезапустите ОБС.
  3. Очистите кеш браузера (внутри исходных свойств браузера).

Да, кеш может вызвать проблемы. Особенно после изменения CSS.

Бонусный совет: используйте PNG и WebM для прозрачности.

Если источник вашего браузера отображает изображения или анимацию, убедитесь, что они поддерживают прозрачность.

Лучшие форматы:

  • PNG для изображений
  • WebM с альфа-каналом для видео
  • GIF (качество ограниченное, но работает)

Если вы используете MP4, прозрачность не будет работать. MP4 не поддерживает альфа-каналы.

Это не проблема OBS. Это ограничение формата.

Что делать, если вы не можете редактировать сайт?

Иногда вы не контролируете страницу.

Возможно это виджет. Или сторонний инструмент без параметров CSS.

У вас еще есть варианты.

Вариант 1. Используйте хроматический ключ.

Если фон ярко-зеленый или другой сплошной цвет, его можно удалить.

  1. Щелкните правой кнопкой мыши источник браузера.
  2. Выберите Фильтры .
  3. Нажмите + .
  4. Выберите Хромакей .

Регулируйте настройки, пока фон не исчезнет.

Лучше всего это работает с ярко-зеленым фоном.

Но это не идеально. Мелкие детали могут пострадать.

Изображение не найдено в постмете

Вариант 2: обрезать

Удерживайте ALT , перетаскивая края источника в OBS.

При этом части кадра обрезаются.

Таким образом вы можете скрыть нежелательные края фона.

Это просто. И быстро.

Расширенный метод: для пользовательских наложений HTML

Если вы создаете свои собственные наложения, обеспечить прозрачность легко.

Начните свой HTML следующим образом:

<!DOCTYPE html>
<html>
<голова>
<стиль>
  HTML, тело {
    маржа: 0;
    заполнение: 0;
    фон: прозрачный;
    переполнение: скрыто;
  }
</стиль>
</голова>
<тело>

<!-- Ваш контент здесь -->

</тело>
</html>

Это удаляет поля и гарантирует, что страница останется чистой и полностью прозрачной.

Также избегайте добавления:

  • Фоновые изображения
  • Фоновые градиенты
  • Цвета темы по умолчанию

Держите его минимальным.

OBS позаботится обо всем остальном.

Советы по производительности

Прозрачность отличная. Но источники браузера могут использовать процессор.

Держите все гладко:

  • Используйте небольшие размеры наложения.
  • Отключите ненужную анимацию.
  • Уменьшите частоту кадров, если в этом нет необходимости.
  • Избегайте тяжелого JavaScript.

Если наложение запаздывает, возможно, это не проблема прозрачности. Это может быть просто слишком сложно.

Быстрый контрольный список прозрачности

Если что-то не работает, просмотрите этот список:

  • Фон сайта установлен на прозрачный?
  • Использовали ли вы фон: прозрачный; в CSS?
  • Вы обновили исходник?
  • Вы очистили кеш?
  • Поддерживают ли форматы изображений прозрачность?
  • OBS актуален?

Большинство проблем решаются менее чем за пять минут.

Почему прозрачность имеет значение

Прозрачные накладки выглядят профессионально.

Они сливаются с вашей сценой.

Никаких уродливых коробок.

Никаких странных границ.

Ваши оповещения естественным образом отображаются над игровым процессом или камерой.

И ваш поток мгновенно станет чище.

Маленькая деталь. Большая разница.

Заключительные мысли

Сделать исходный код браузера прозрачным в OBS Studio не сложно.

Поначалу это кажется загадочным.

Помните золотое правило:

Прозрачность должна исходить от самого веб-сайта.

OBS будет отображать именно то, что выводит страница. Ничего больше. Не меньше.

Как только ваш CSS использует прозрачный фон, OBS автоматически творит чудеса.

Теперь очистите эти наложения.

Ваш стрим этого заслуживает.