Фон
Фон используется для визуального оформления сайта. Фон можно применить практически для всех элементов, кроме Картинки (т.к. она будет перекрывать фон). В качестве фона можно установить цвет, градиент или изображение, а также сделать наложение нескольких слоев фона.
Параметры фона можно установить на вкладке Стилей правой панели в разделах Фон и Цвет фона
Цвет фона можно установить, введя значение цвета (в формате Hex или RGB) или выбрав цвет с помощью средства выбора цвета - пипетка (color picker).
Вы можете сохранять цвета для последующего использования их в проекте. Для этого нажмите кнопку “+” в параметре Сохраненные цвета (Saved Colors).
Можно также выбрать цвет из недавно использованных вариантов, нажав на выпадающий список в этом параметре и выбрав Недавно использованные цвета (Last Used Colors).
Можно также установить прозрачность фона от 0 до 100%. По умолчанию большинство элементов имеют прозрачный фон (0%). Некоторые элементы имеют цвет фона по умолчанию, который можно переопределить.
Градиенты можно использовать как сами по себе, так и поверх существующего цвета фона или изображения.
Для добавления градиента:
- нажмите кнопку “+” рядом со списком Solid, Image, Gradient:
- кликните по цвету:
- выберите вкладку с нужным типом градиента:
Существует два типа градиентов:
- Линейные
- Радиальные
Оба типа градиентов имеют остановки (или точки) вдоль градиента, где цвета переходят из одного в другой.
Линейный градиент создает градиент цвета в одном направлении.
Угол градиента
Установить угол наклона градиента можно двумя способами:
- Перетащить точку на циферблате Угол (Angle), чтобы задать положение угла.
- Ввести желаемый угол в поле ввода.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/hZzsHe8Z6KigBFUtwh6Bh_izobrazhenie.png?format=webp)
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/mUZgrrzSEzbX0Vl3S_pBO_izobrazhenie.png?format=webp)
Точки градиента
С помощью градиентных точек (остановок) можно редактировать цвет и прозрачность градиента.
Для изменения цвета выберите нужную точку на полосе градиентов и установите для нее желаемый цвет ниже (введя его значение или с помощью пипетки).
Чтобы добавить дополнительные цвета к градиенту, нужно добавить точку на полосу градиента. Для этого кликните на полосе градиента в нужном месте. Можно добавить несколько точек.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/BDlS_uLOogLdrhW2RrCX3_izobrazhenie.png?format=webp)
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/PyPWgEKvc66f9pRa3P4dA_izobrazhenie.png?format=webp)
Можно настроить положение точки градиента, перетащив ее вдоль полосы градиента. Чтобы удалить точку градиента, кликните по ней правой кнопкой мыши.
Повторить (Repeat) градиент
Включение Повтора приведет к повторению градиента. Это задается положением первой и последней точек. Чтобы создать повторяющийся градиент, перетащите первую и/или последнюю точку подальше от края полосы градиента.
Обратный градиент
Кнопка обратного градиента изменяет положение точек градиента на противоположное.
Радиальные градиенты создают градиент в форме круга.
Цветовая точка слева будет цветом, который отображается в центре радиального градиента.
Позиция центра радиального градиента
Можно выбрать фокусную точку градиента, кликнув на одой из точек в элементе управления его положением.
Можно также включить или отключить размах градиента (Scale) и повторение (Repeat) и управлять видом градиента с помощью параметров Вид (Kind) и Размер (Size).
Для добавления фонового изображения:
- нажмите кнопку “+” рядом со списком Solid, Image, Gradient:
- кликните по цвету:
- выберите вкладку Изображение (Image), нажмите кнопку Выбрать изображение (Choose Image), а затем выберите одно из уже загруженных изображений или загрузите новое:
После выбора изображения его отображение появится в окне предварительного просмотра.
Для фонового изображения можно указать параметры положения и размера. Также можно сделать изображение повторяющимся по горизонтали и/или по вертикали.
Размер фонового изображения
Оригинальный (Original)
По умолчанию добавленное изображение имеет размер 100%, т.е. соответствует размерам оригинала. Вы можете установить желаемый размер изображения в процентах в параметре Размер (Size) с помощью ползунка. Максимальный размер изображения - 200%.
При этом если элемент, на который наложено фоновое изображение имеет другие размеры, то изображение будет обрезаться или не полностью его покрывать.
Вмещать (Contain)
Пропорционально масштабирует фоновое изображение, чтобы оно полностью отображалось внутри элемента.
Растягивать (Cover)
Пропорционально масштабирует фоновое изображение, чтобы заполнить и покрыть весь элемент. Изображение может быть обрезано в зависимости от размеров элемента.
Залить (Fill)
Масштабирует изображение, подстраивая его размеры под размеры элемента, не обрезая. Изображение может искажаться.
Вмещать по ширине (W)
Масштабирует изображение, вмещая его по ширине.
Вмещать по высоте (H)
Масштабирует изображение, вмещая его по высоте.
Положение фонового изображения
По умолчанию фоновое изображение размещается в верхнем левом углу элемента. Вы можете изменить положение фона, чтобы настроить внешний вид изображения. Можно выровнять изображение по вертикали и горизонтали.
Чтобы вручную настроить положение фонового изображения, можно ввести значение положения для горизонтального положения (X) и вертикального положения (Y) в пикселяx или перемещать изображение в окне предпросмотра, зажав его левой кнопкой мыши.
Плитка (Tile) (повторение изображения)
По умолчанию фоновое изображение не повторяется. Вы можете выбрать повторение фона:
- по вертикали и по горизонтали
- только по горизонтали
- только по вертикали
Фиксация или прокрутка
Поведение фонового изображения при прокрутке можно выбрать в настройках фона:
- Не фиксировать - изображение прокручивается вместе со страницей.
- Фиксировать - изображение остается на месте при прокрутке.
Все фоновые изображения по умолчанию не фиксированы. Фиксация фонового изображения приводит к тому, что ширина изображения должна ограничиваться размером окна браузера, а не границами элемента.
На любой фон можно добавить цветовое наложение (Solid). Для этого добавьте новый слой фона, выберите его цвет и установите значение непрозрачности.
Для добавления цветового наложения:
- Нажмите кнопку “+” рядом со списком Solid, Image, Gradient:
- Кликните по цвету:
- В открывшемся окне на вкладке Solid выберите цвет и прозрачность цветового наложения (например, 50%):
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/MvFwFaL683ebGdlXb_HxA_izobrazhenie.png?format=webp)
Теперь поверх слоя фона с изображением наложен цветовой фон с прозрачностью 50%:
Вы можете также делать наслоение изображений и градиентов. Добавляйте несколько фоновых изображений, градиентов и цветовых наложений для создания многоуровневых эффектов.
Чтобы изменить порядок фоновых слоев, перетаскивайте слои, потянув за значок слева. Вы также можете переключить видимость слоя, кликнув на “глаз” справа, и удалить слой, нажав на кнопку "-".
Оба параметра - Background Color и Solid используются для установки цвета фона, однако между ними есть некоторые отличия.
- Параметр Background Color существует у элемента по умолчанию, а параметр Solid можно установить, только добавив дополнительный фоновый слой.
- Параметр Background Color определяет цвет фона самого нижнего фонового слоя, а параметр Solid - цвет фонового слоя, лежащего выше. Поэтому при установке у параметра Solid непрозрачности 100% он будет перекрывать Background Color.
- При установке у параметра Solid непрозрачности менее 100% он работает как полупрозрачное цветовое наложение на нижние слои фона. В этом случае цвет фона определяется сочетанием цветов Background Color и Solid. По этой причине параметр Solid часто используется для полупрозрачного наложения цвета (например, на слой фона с изображением).