Стили фона - помощь Webflow
Обзор стилей фона, которые вы можете установить на элементе: цвет, изображения, градиенты, цветовые наложения и видео.
Цвет фона
Вы можете установить цвет фона на любом элементе, кроме изображений и видео (хотя вы можете использовать изображения и видео в качестве фона). Добавьте цвет фона, введя значение цвета (например, hex, rgba или имя цвета) или используя палитру цветов. Вы также можете добавить цвет фона к текстовым элементам или конкретному текстовому содержимому внутри текстового элемента.
Если вы хотите, чтобы цвета фона были единообразными на всем сайте, используйте тег Body (Все страницы) для наследования. Стилизуйте его, выбрав элемент Body и выбрав тег в панели стилей или используя меню наследования. Любые изменения в Body (Все страницы) будут применяться по умолчанию к новым элементам.
Большинство элементов имеют прозрачный фон по умолчанию. Некоторые элементы, такие как компонент Slider, имеют цвет по умолчанию, который вы можете изменить.
Фоновое изображение
Webflow предлагает множество вариантов настройки фонового изображения.
Чтобы добавить или изменить фоновое изображение:
- Прокрутите до Фоны в Панели стилей
- Нажмите Выбрать изображение в панели активов
- Установите флажок @2x для более четких изображений на устройствах HiDPI
Чтобы установить фоновое видео, используйте компонент фонового видео в панели добавления.
Размер фонового изображения
- Пользовательский: Установите значения ширины/высоты или проценты. Масштабируйте больше со значениями выше 100%.
- Заполнить: Заполняет и покрывает фон, возможно, обрезая изображение.
- Содержать: Удерживает изображение внутри элемента.
Позиция фонового изображения
По умолчанию верхний левый угол. Можно вручную настроить позиции (px, %, VW, VH).
Плитка
Фоновые изображения повторяются по вертикали и горизонтали по умолчанию. Управляйте повторением по горизонтали, вертикали или вовсе без повторения.
Фиксированное или прокручиваемое
Выберите Не фиксированное (изображение прокручивается) или Фиксированное (изображение остается на месте). Фиксированные изображения ограничены областью просмотра.
Градиенты
Градиенты могут использоваться отдельно или накладываться на цвет/изображение фона. Два типа:
- Линейные градиенты
- Радиальные градиенты
Оба имеют остановки (точки), где цвета исчезают.
Линейный градиент
Установите направление по углу с помощью циферблата, стрелок (с шагом 45 градусов) или ввода в поле.
Остановки градиента
Редактируйте цвет/прозрачность на остановках. Наложение на изображение делает его видимым при низкой прозрачности. Добавляйте остановки, нажимая. Удаляйте, перетаскивая.
Повтор
Переключатели для повторения градиента.
Обратный
Иконка для обратного расположения остановок.
Радиальный градиент
Создает круговой градиент. Левая остановка — цвет в центре.
Позиция
Выберите фокусную точку с помощью точек или вручную с помощью значений/единиц.
Размер
Предустановленные настройки:
- Ближайшая сторона: от центра до ближайшей стороны
- Ближайший угол: от центра до ближайшего угла
- Дальняя сторона: от центра до дальней стороны
- Дальний угол: (по умолчанию)
Цветовая наложение
Добавьте цветовую наложение к фонам с помощью выбора цвета и прозрачности.
Слои изображений и градиентов
Сложите несколько фоновых изображений, градиентов и наложений для эффекта. Изменяйте порядок перетаскиванием, переключайте видимость с помощью иконки глаза, удаляйте с помощью корзины.
Фоновое видео
Фоновые видео — это беззвучные, зацикленные видео для фонов, чтобы добавить кинематографический эффект. Учтите:
Добавьте с помощью Быстрого поиска (CMD/CTRL+E) или панели Добавить > Компоненты. Загрузите ваше видео (<30MB; webm, mp4, mov, ogg). Имена файлов должны избегать пробелов/специальных символов.
Транскодирование происходит после загрузки (mp4 и webm для поддержки браузером).
Настройки видео
- Зациклить видео: повторяется непрерывно.
- Автовоспроизведение видео: начинается при загрузке страницы.
- Включить кнопку воспроизведения/паузы: посетитель может управлять воспроизведением.
Предварительный просмотр фонового видео
- Наведите курсор на миниатюру
- Откройте в новой вкладке
- Значок предварительного просмотра на панели
Замена фонового видео
Откройте настройки, чтобы заменить видео, транскодировать, просмотреть и т.д.
Использование фонового видео в качестве секции
Поместите контент внутрь элемента фонового видео. Стиль как обычно в панели стилей.
Наложение фонового видео
Добавьте градиент или сплошное наложение для контраста. Наложение располагается поверх видео, под контентом.
И это использование фонов в Webflow!