Фон для сайта как сделать


Делаем видео в качестве фона сайта с помощью HTML

Серёжа СыроежкинКопирайтер

В текущей статье мы поговорим о том, как установить видео в качестве фона для сайта (video background). Видео в качестве фона страницы можно сделать только с помощью HTML5. Для этого мы:

  • Используем тег video на HTML-странице;
  • С помощью CSS-стилей растянем видео на весь экран и используем в качестве основного фона.

Создаем видеоплеер с помощью HTML

О том, как сделать видеоплеер у себя на сайте с помощью HTML5 мы уже говорили в статье Проигрыватель видео HTML5. В той же статье мы обсуждали вопрос кроссбраузерности, вспомним основную идею:

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

Поэтому, создадим видео для фона сайта в двух форматах: H.264 и WebM. Этого будет достаточно, чтобы охватить основной ряд современных браузеров (Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer). Полученное видео рекомендуется обернуть в тег div для последующего позиционирования. Получим следующий код HTML:

<div>
 <video loop="loop" autoplay="autoplay" preload="auto">
 <source src="nubex.mp4"></source>
 <source src="nubex.webm" type="video/webm"></source>
 </video>
 </div>

Благодаря атрибуту autoplay видео будет проигрываться сразу после загрузки страницы, когда решит браузер (поскольку атрибут preload стоит на значении auto).

Настраиваем стили с помощью CSS

Рассмотрим теперь CSS-код для видео.

Полный код страницы с установленным видео в качестве фона сайта:

<html>
 <head>
 <title>Видео в качестве фона сайта - Нубекс</title>
 <style>
 .overlay {width: 100%; height:100%; display:block;}
 #nubexDiv {
 top: 0; bottom: 0; left: 0; right: 0;
 position: fixed;
 overflow: hidden;
 }
 #nubexVideo {
 top: 0; left: 0;
 position: absolute;
 width: auto; height: auto;
 min-width: 100%; 
 min-height: 100%; 
 }
 </style>
 </head>
 <body>
 <div>
 <video loop="loop" autoplay="autoplay" preload="auto">
 <source src="nubex.mp4"></source>
 <source src="nubex.webm" type="video/webm"></source>
 </video>
 </div>
 </body>
 </html>

Здесь мы, по-сути, добавляем блок с видео с помощью HTML, и с помощью CSS растягиваем его на весь экран.

Смотрите также:

.

html - Как сделать фон моего веб-сайта прозрачным, не делая прозрачным и контент (изображения и текст)?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
.

CSS-фонов


Свойства фона CSS используются для определения фоновых эффектов. для элементов.

В этих главах вы узнаете о следующих свойствах фона CSS:

  • цвет фона
  • фоновое изображение
  • фон-повтор
  • фон-приставка
  • фон-позиция

Цвет фона CSS

Свойство background-color определяет цвет фона элемента.

Пример

Цвет фона страницы устанавливается следующим образом:

тело {
background-color: светло-голубой;
}

Попробуй сам "

В CSS цвет чаще всего определяется следующим образом:

  • допустимое название цвета - например, «красный»
  • шестнадцатеричное значение - например, "# ff0000"
  • значение RGB - например, «rgb (255,0,0)»

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


Прочие элементы

Вы можете установить цвет фона для любых HTML-элементов:

Пример

Здесь элементы

,

и

будут иметь разные цвета фона:

h2 {
цвет фона: зеленый;
}

div {
background-color: светло-голубой;
}

p {
background-color: желтый;
}

Попробуй сам "

Непрозрачность / прозрачность

Свойство непрозрачности определяет непрозрачность / прозрачность элемента.Может принимать значение от 0,0 до 1,0. Чем меньше значение, тем прозрачнее:

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


Прозрачность с использованием RGBA

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

Из нашей главы о цветах CSS вы узнали, что в качестве значения цвета можно использовать RGB. Помимо RGB, вы можете использовать значение цвета RGB с каналом alpha (RGB A ), который определяет непрозрачность цвета.

Значение цвета RGBA задается с помощью: rgba (красный, зеленый, синий, альфа ). В альфа Параметр - это число от 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный).

Совет: Вы узнаете больше о цветах RGBA в нашей главе о цветах CSS.

Пример

div {
background: rgba (0, 128, 0, 0.3) / * Зеленый фон с 30% непрозрачность * /
}

Попробуй сам "


.

Более простой способ изменить фон изображения в Интернете

Я буду краток: вы можете заменить фон фотографии без необходимости глубоких навыков Photoshop. На самом деле, вам вообще не нужны навыки редактирования фотографий. Как это может быть?

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

Шаг 1. Выберите фотографию, которую хотите отредактировать

Откройте PhotoScissors в Интернете, нажмите кнопку «Загрузить» и выберите файл изображения. Программа удалит фон с изображения и отобразит его в браузере:

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

Обычно вам придется повозиться с различными инструментами выделения, но PhotoScissors автоматически удаляет фон с изображения, и даже если нейронные сети допустили ошибку, вы можете исправить результат, используя красный и зеленый маркеры. Щелкните зеленый маркер на панели инструментов и отметьте объекты на переднем плане. Затем выберите инструмент «Красный маркер» и таким же образом отметьте фоновые объекты.

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

Шаг 2: Смена фона

Теперь, чтобы заменить фон фотографии, переключитесь на вкладку Фон в правом меню.

На вкладке «Фон» выберите «Изображение» из раскрывающегося списка, затем нажмите кнопку «Выбрать изображение» и выберите изображение, которое вы хотите использовать в качестве нового фона.

Ницца! Этот фон выглядит намного лучше. И это не заняло много времени. Наконец, сохраните фотографию с замененным фоном, нажав кнопку «Сохранить» на панели инструментов.

Попробовать сейчас: загрузить изображение или Скачать PhotoScissors .

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий