Как сделать фон браузера прозрачным

Обновлено: 21.11.2024

Вы когда-нибудь задумывались, почему вы не видите видео с прозрачностью в Интернете, скажем так, постоянно?

Только представьте, сколько классных вещей можно с ним сделать:

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

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

И это технически возможно. Кроме того, его результаты выглядят великолепно и выделят ваш проект среди тех плоских квадратных видео, которые есть у всех остальных.

Вот что мы пройдем:

Пример альфа-прозрачности в Интернете?

Рад, что вы спросили. Вот пример, который мы собрали. Посмотреть действующий сайт можно здесь, а проект Webflow — здесь.

Почему прозрачность используется реже?

Возможно, потому что он просто не поддерживается — очевидным образом. В этом посте я покажу вам не только как это сделать, но и как обмануть и сделать ярлык с помощью дыма и зеркал.

Приступим к делу. Но сначала давайте договоримся о нескольких условиях.

Итак, синяя рамка — это ваш веб-сайт, красная рамка — ваше прозрачное видео, а зеленая рамка — ваш дополнительный передний план, который также может быть видео.

Большой вопрос, который определит наш дальнейший путь: что вы хотите использовать в качестве фона под своим видео?

От вашего ответа зависит, пойдем ли мы по простому пути или посложнее. Начнем с первого.

Легкий способ

Вот пример.

Видите, здесь два видео? На верхнем слое есть видео, показывающее их продукт. Элементы сжимаются и растут, как будто это не имеет большого значения. И в довершение всего, у них даже есть видео, работающее под видео. Вот как это будет выглядеть

Как они это сделали? Ну, они этого не сделали. Вот что происходит на самом деле

То, что мы видим здесь, — умный обходной путь. Дизайнеры Typeform просто объединили видео пользовательского интерфейса поверх фонового видео в одно видео. Затем они сопоставили цвет фона с цветом под текстом и использовали новое комбинированное видео в качестве элемента фона. Прозрачность не требуется.

Вот видео, которое они используют:

Итак, это обходной путь — дым и зеркала. Это работает, потому что фон абстрактный и хорошо сочетается с фоном сайта.

Теперь главный вопрос: что, если фон не абстрактный? Что, если вы просто хотите воспроизвести видео поверх отображаемого html, как в первом примере? Для этого нам понадобится нож побольше.

Настоящий способ

Это не должно быть проблемой. У нас были прозрачные форматы видео в течение многих лет. Так почему же это не просто? Короче говоря, есть два больших браузера от двух больших компаний. Google и Chrome считают, что открытый исходный код — это круто, поэтому они создали собственный формат с открытым исходным кодом. Apple и Safari хотят придерживаться стандарта MPEG, поэтому они поддерживают HEVC (H265).

Safari поддерживает HEVC с альфа-каналом, Chrome — нет.
Chrome поддерживает VP9 с альфа-версией, Safari — нет.

Что теперь? Как вы уже догадались: нам придется предоставить * оба * формата и позволить каждому браузеру выбирать.

Конвертация видео

Очевидно, что первое, что вам нужно, — это видео с альфа-каналом. (Если вы используете Rotato, вот как его получить)

Что экспортировать

Прежде чем что-либо делать, убедитесь, что ваше видео не слишком велико, так как вы будете воспроизводить его непосредственно в Интернете. В Rotato разрешения 720p часто достаточно для короткого видео.

Сначала экспортируйте файл HEVC с альфа-каналом и назовите его movie-hevc.mov. Это будет наш фильм, готовый к сафари.
Если ваше видеоприложение поддерживает VP9 с прозрачностью, выберите его. Если он не поддерживает его напрямую, например Rotato, выберите HEVC с альфа-каналом, а затем преобразуйте его в WebM, как описано ниже.

Теперь у нас есть 50 % необходимых видео, так что мы уже на полпути! Затем мы конвертируем это видео HEVC в VP9, чтобы Chrome тоже мог что-то воспроизводить.

Использование конвертера Rotato

Хорошие новости для вас: мы создали небольшой бесплатный инструмент, который конвертирует в оба формата альфа-прозрачности за один раз! Его достаточно просто загрузить и использовать, но вы также можете ознакомиться с нашим руководством по использованию Rotato Converter.

Использование FFmpeg

Если вы хотите поэкспериментировать, вы можете установить FFmpeg и выполнить преобразование самостоятельно. Вот как это сделать:

Установка FFmpeg

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

Это инструмент командной строки, поэтому вам потребуется открыть Терминал на вашем Mac. Оказавшись там, перейдите в папку с исходным видео.

Преобразование в WebM с помощью FFmpeg

В Терминале в папке с экспортированными видео введите следующую команду

Если у вас есть компьютер Mac с процессором Intel, теперь вы услышите, как работают вентиляторы охлаждения. Это займет несколько минут, в зависимости от размера вашего видео. Здесь много математики, так что берите кофе и ждите. Это может занять 10–15 минут.

Использование видео в Интернете

Теперь у вас должно быть два видеофайла, которые вам нужны. Пришло время разместить их в сети!

Загрузите фильмы на свой веб-сервер и используйте этот фрагмент кода везде, где вам нужно видео.

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

Это было много! Но если посмотреть на это сверху, то это простой процесс:

Создайте видео с прозрачностью в программе редактирования видео, такой как Premiere, Final Cut или Rotato.
Преобразуйте это видео в формат HEVC с помощью Alpha и WebM.
Загрузить эти видео на веб-сервер
Вставьте видео на свой веб-сайт, используя тег видео с двумя исходными дочерними тегами.

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

До сих пор нет официального, благодаря тому, что окно сделано прозрачным. Однако вот программное обеспечение для Windows, которое поможет вам добиться этого эффекта.

За прошедшие годы Windows Aero добавила несколько приятных эффектов к окнам рабочего стола, но даже сегодня нет официальной возможности сделать окно прозрачным. К счастью, есть сторонние инструменты, которые помогут нам достичь этой цели.

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

Оглавление

Стекло2k

Мы не собираемся вводить вас в заблуждение; Glass2k — старая программа. в тот момент, когда вы загружаете страницу, вас атакуют сломанные панели Flash и огромный красный баннер, сообщающий, что разработка давно остановлена.

Системные требования требуют, чтобы ваш компьютер имел ЦП 400 МГц, 64 МБ ОЗУ и графическую карту 8 МБ. В FAQ вы прочтете печальную новость о том, что этот проект не будет разработан для Windows 95 или 98. И все же, несмотря на свой возраст, он по-прежнему отлично работает на машине с Windows 10.

Если вы не любите устанавливать старое программное обеспечение на свой компьютер, не беспокойтесь. Glass2K не требует установки; Загрузите исполняемый файл размером 55 КБ и откройте его, чтобы запустить. Вы настроите его на автоматический запуск при запуске Windows, если сочтете его особенно полезным.

Когда загрузится Glass2k, вам будет доступно несколько вариантов. «Всплывающее окно прозрачности» позволяет установить ярлык для формирования окна настроек. основная кнопка должна нажиматься правой кнопкой мыши, но вы сами выбираете, какие другие кнопки нажимать при открытии окна.

Если вы предпочитаете щелкать все правой кнопкой мыши, вместо этого вы будете использовать числа для настройки прозрачности. «Сочетания клавиш» позволяет установить горячую клавишу для быстрой активации открытости. Выбрав горячую клавишу, удерживайте ее и нажимайте клавишу выбора от нуля до девяти.

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

Здесь также можно настроить прозрачность панели задач. Просто сдвиньте синюю полосу влево и вправо, чтобы настроить прозрачность полосы. Если вам нужна эта функция, Glass2k — лишь одна из нескольких программ, которые сделают панель задач прозрачной в Windows 10.

Просмотр

Peek Through — еще одна запись, которая выдержала испытание временем, хотя и новее, чем Glass2k. Он вышел как версия 1.1.0.0 еще в 2010 году и с тех пор не получал обновлений. Опять же, несмотря на это, Peek Through по-прежнему нормально работает с Windows 10.

После загрузки установите горячую клавишу, которая использует клавишу Windows на клавиатуре. Peek Through позволит вам узнать, не конфликтует ли выбранная вами горячая клавиша с другой, так что ищите, пока не найдете что-то бесплатное и работающее для вас. Затем нажмите горячую клавишу на окне, чтобы сделать его прозрачным или непрозрачным. Вы можете изменить степень прозрачности окна с помощью ползунка в приложении.

Сначала кажется, что это упрощенная версия Glass2k; тем не менее, это отличная функция в рукаве. Если вы включите для него выбор, вы будете нажимать на окна под прозрачным. Так, например, если у вас есть один монитор, вы набираете свой отчет в одном окне, включаете его, а затем щелкаете ссылку в браузере за ним, чтобы узнать, о чем написать дальше.

Верх окна

Подойдя к вершине нашего исторического тура по программам обеспечения прозрачности, у нас есть WindowTop. WindowTop продолжает получать обновления на момент написания статьи и разработан с учетом современных версий Windows 10. В результате более старые версии Windows и Windows 10 по-прежнему могут загружать менее многофункциональную версию.

После загрузки WindowTop располагается в самом верхнем из ваших окон, отображаясь только при наведении на него указателя мыши. Но, конечно же, WindowTop специализируется не только на прозрачности окон; у него в рукаве есть пара приятных трюков, например, возможность закрепить окно на самом высоком уровне, сжать окна до крошечного размера и инвертировать его цвета.

Вы можете активировать прозрачность окна одним из двух способов. вы нажмете сочетание клавиш (ALT+A, которое можно изменить, щелкнув значок на панели инструментов); в противном случае вы можете навести указатель мыши на верхнюю часть окна и щелкнуть появившуюся стрелку вниз, а затем выбрать «Непрозрачность». В WindowTop также есть функция перехода по клику, которая есть в Peek Through.

Фактическое прозрачное окно

Последнее слово в управлении прозрачностью: вы не можете потерпеть неудачу с Actual Transparent Window. Это программное обеспечение имеет множество опций, с которыми можно повозиться, так что вы найдете подходящее рабочее пространство для своего ПК.

При загрузке программного обеспечения вы в первую очередь обнаружите параметры автоматической прозрачности. Они позволяют настроить поведение окон в определенных условиях. кто-то хочет, чтобы окна запускались прозрачными? Кто-то хочет, чтобы все неактивные окна были прозрачными? Как насчет того, чтобы навести на них указатель мыши? Вы будете включать и выключать эти параметры, а также устанавливать индивидуальные уровни прозрачности для каждого действия.

Если вам не нравится, что окна регулируются сами по себе, вы всегда будете валяться в сене вручную. Совместимые окна будут иметь две кнопки вверху, которые переключают прозрачность. Тем не менее, если они имеют тенденцию появляться внутри, вы можете удалить их с помощью параметра «Кнопки заголовка» в настройках. Вы также включите параметры прозрачности, чтобы они отображались при щелчке правой кнопкой мыши или применялись после двойного щелчка по строке заголовка.

В приложении также есть «Призрачный режим». При активации вы будете нажимать на элементы за окном, как если бы их там не было, но вы все равно будете взаимодействовать с ними через клавиатуру. Например, это позволяет вам щелкать окна под прозрачной системой обработки текстов, продолжая печатать в документе.

Actual Transparent Window может быть фантастическим инструментом; к сожалению, это единственная запись в этом списке, которая требует оплаты для использования навсегда. Вы будете пробовать его каждую неделю, после чего полная версия будет стоить 19,95 долларов. Если вы купили его и он вам не понравился, у вас есть 30 дней, чтобы потребовать возврата денег; по сути, у вас есть месяц и одна неделя, чтобы решить, подходит ли вам это без риска.

Как сделать так, чтобы Windows 10 работала на вас лучше

Если вам нужен звук прозрачных окон, вы будете разочарованы тем, что Windows 10 предлагает по умолчанию. К счастью, многие сторонние инструменты помогут вам в достижении этой цели, хотя они и устарели!

Вопросы пользователей:

Вопрос (решенный) Google Chrome: прозрачное наложение искажает текст?

У меня была проблема, из-за которой я перестал использовать Google Chrome. Кажется, что есть «наложение» белой или прозрачной шахматной доски поверх контента на веб-странице. Это влияет только на определенные области веб-страницы, а не на весь текст. Также кажется, что он немного меняется, если я настраиваю масштаб на странице. Время от времени и без шаблона, если он находится в заполняемом поле и я нажимаю или навожу курсор на сектор, прозрачная шахматная доска начинает «мигать» и гаснуть. Я пытался удалить свои расширения, обновить Chrome, изменить масштаб страницы и перезагрузить компьютер. Эта проблема возникла 2 обновления назад.

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

Мой значок Google Chrome прозрачный

Я открыл Google Chrome, чтобы использовать его; с другой стороны, когда я проверил свой рабочий стол, мой значок Google Chrome был прозрачным; почему это?

Это квадрат с черным контуром. Это время от времени приходит и уходит, и не имеет значения, в какой программе я работаю. У меня также были некоторые странные случаи, когда казалось, что кто-то удаленно получает доступ к моему компьютеру. У меня даже появились новые вкладки браузера в Chrome на веб-сайтах, которые я никогда не посещал, и поэтому на днях я наблюдал, как письма удаляются из моего почтового ящика на моих глазах… Странные вещи.Это произошло как в домашней, так и в рабочей сети. Это четырехмесячный Sony Vaio с Windows 8.1. См. рамку в правом верхнем углу снимка экрана.

Панель вкладок Chrome непрозрачна?

Заголовок примерно. Сегодня заметил, что он не прозрачный. Как вернуть обратно?

Свойство opacity устанавливает уровень прозрачности элемента.

Уровень непрозрачности описывает уровень прозрачности, где 1 означает отсутствие прозрачности, 0,5 – прозрачность 50%, а 0 – полную прозрачность.

Примечание. При использовании свойства opacity для добавления прозрачности фону элемента все его дочерние элементы также становятся прозрачными. Это может затруднить чтение текста внутри полностью прозрачного элемента. Если вы не хотите применять непрозрачность к дочерним элементам, используйте вместо этого значения цвета RGBA (см. «Дополнительные примеры» ниже).

Значение по умолчанию:	1
Унаследовано:	нет
Анимация:	да, просмотреть отдельные свойства. Прочтите об animatable Попробуйте
Версия:	CSS3
Синтаксис JavaScript:	object.style.opacity="0.5" Попробуйте

Поддержка браузера

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.

Примечание. IE8 и более ранние версии поддерживают альтернативное свойство filter. Типа: filter:Alpha(opacity=50).

Синтаксис CSS

Значения свойств

Значение	Описание	Демо
число	Определяет непрозрачность. От 0,0 (полностью прозрачный) до 1,0 (полностью непрозрачный)	Demo ❯
initial	Устанавливает для этого свойства значение по умолчанию. . Подробнее о initial
inherit	Наследует это свойство от родительского элемента. Прочтите об наследовании

Больше примеров

Пример

Свойство opacity добавляет прозрачность фону элемента, а также всем его дочерним элементам. Это затрудняет чтение текста внутри прозрачного элемента:

Пример

Чтобы не применять непрозрачность к дочерним элементам (как в примере выше), вместо этого используйте значения цвета RGBA. В следующем примере задается непрозрачность для цвета фона, но не для текста:

Не уверен, является ли это ошибкой CEF или OBS, но прозрачность в источниках браузера отображается неправильно в версии 27.1.1.

Вот изображение примера тени текста CSS w3schools. Верхний текст захвачен с помощью источника Display Capture в Chrome 93. Нижний текст — это источник браузера с тем же HTML/CSS, что и в примере w3schools, но отображается по-другому.

Вот более впечатляющий пример использования WEBM, воспроизводимого изначально в OBS в качестве источника мультимедиа и воспроизводимого через источник браузера.

В версии 27.0.1 они выглядели одинаково.

Этапы воспроизведения

Добавить источник браузера с прозрачностью.
Обратите внимание на серьезные артефакты.

Что-нибудь еще, что мы должны знать?

Текст был успешно обновлен, но возникли следующие ошибки:

tsunami643 прокомментировал 29 сентября 2021 г. •

Я не могу повторить это. Пожалуйста, предоставьте файл журнала в соответствии с запросом вместо намеренного пропуска этого шага.

Слева – браузер, справа – OBS.

Фенриртвити прокомментировала 29 сентября 2021 г.

Я вижу довольно много сторонних плагинов, но ни один из них сразу не вызывает такой проблемы.

Исходный код браузера и версия CEF идентичны тому, что у меня есть:

Можете ли вы предоставить ссылку на тестовый файл webm? Я подозреваю, что это как-то связано с вашей конкретной настройкой или каким-то мошенническим фильтром, но трудно сказать.

tsunami643 прокомментировал 29 сентября 2021 г. •

Я перезагрузил компьютер, проблема осталась. Вернулся к версии 27.0.1, и в этой версии все снова выглядит нормально.

Фенриртвити прокомментировала 29 сентября 2021 г.

Получение 404 по этой ссылке.

tsunami643 прокомментировал 29 сентября 2021 г.

Фенриртвити прокомментировала 29 сентября 2021 г.

Спасибо, я смог убедиться в различиях при воспроизведении через webm. У меня нет ответа, почему, но мы проверим это, когда у нас будет время.

mihawk90 прокомментировал 29 сентября 2021 г. •

Это проблема, связанная с тем, как цвета смешиваются с фоном (или его отсутствием) и предполагаемым поведением с помощью CEF/Chromium или чего-то еще.

Удалите пользовательский CSS по умолчанию (или хотя бы часть цвета фона), и он будет отображаться точно так же, как в Chrome.

К сожалению, то же самое поведение трудно продемонстрировать в самом Chrome, поскольку единственный способ сделать это - иметь прозрачное окно Chrome и поместить за ним черный фон вручную (читай: то же самое, что делает OBS). Добавления background-color: black для HTML-элемента и background-color: rgba(0, 0, 0, 0) для body недостаточно, так как это все равно смешивает черный цвет с прозрачностью.

Редактировать:
Сверху используется пользовательский CSS по умолчанию, низ удален.

Читайте также: