Установка фонов

Вот несколько способов установки фонов на slidde.co. CSS фоны могут быть установлены на любой элемент в slidde.co

CSS фон

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

Цвет-заполнитель, когда ваше фоновое изображение загружается или часть вашего фонового изображения прозрачна:

backgroundColor: #000

URL изображения можно загрузить с помощью slidde.co. Вы также можете использовать CSS градиенты здесь, и slidde.co предоставляет некоторые пресеты градиентов без кода:

backgroundImage: url("your_image_url")

Вы можете использовать "cover" в большинстве случаев, чтобы ваш фон покрывал все изображения:

backgroundSize: cover

Если backgroundSize: "cover" скрывает какую-то важную часть вашего изображения, вы можете отрегулировать их позиции:

backgroundPosition: 50% 10px

Если ваше фоновое изображение не является повторяющимся узором, вы можете установить это значение на no-repeat:

backgroundRepeat: no-repeat

Управляет тем, движется ли фоновое изображение при прокрутке страницы. Обычно вам понадобится статическая фотография, которая не следует за прокруткой, потому что она покрывает страницу:

backgroundAttachment: fixed

Вы можете ознакомиться с документами MDN для более подробной информации

Анимация фонов

Если вы используете CSS backgroundImage, то вы можете легко анимировать его backgroundPosition. Вот пример.

duration: 1500ms
delay: 800ms
easing: easeOutCubic
0% { backgroundPositionY: -36vw; }
100% { backgroundPositionY: 0; }

Вы также можете анимировать другие свойства CSS.

Однако, если вам нужно анимировать такие вещи, как CSS opacity, вы не можете анимировать это напрямую. Поскольку opacity применяется ко всему элементу. Вместо этого вы должны использовать imageElement в Расширенный фон и установить target на &>*:first-child, чтобы применить это только к элементу изображения.

Продвинутые фоны

Это применимо к Page Slide Container. Вы можете нажать Расширенный фон и выбрать следующие опции.

Фоны с изображениями - Установка фильтров на фоновое изображение

Нажмите Расширенный фон и выберите imageElement. Это создаст отдельный HTML элемент <div><img /></div> внутри контейнера в качестве первого элемента.

Затем вы можете применить к нему CSS свойства, такие как фильтр. Например, вот 3 способа создать больший контраст между фоновым изображением и текстом на переднем плане для улучшения читаемости.

filter: grayscale(0.5)

filter: brightness(0.5)

filter: blur(5px)

Посмотрите документацию MDN для более глубокого введения.

Анимированные фоны

Нажмите Расширенный фон и выберите animated.

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

Обычно вы можете настроить backgroundColor backgroundImage анимированного фона. Некоторые предустановки также имеют CSS переменные, которые позволяют настроить цвет, расстояние или продолжительность анимации.

Фоны с повторяющимся узором

Нажмите Расширенный фон и выберите pattern.

1. Выберите тип узора
2. Затем вы можете настроить параметры узора. И вы можете попробовать нажать кнопку Insipre me, чтобы увидеть, какой случайный узор он вам предложит.

Это создаст отдельный HTML элемент <div><svg width="100%" height="100%" .../></div> внутри. Это значит, что вы можете также настроить его CSS свойства, такие как opacity, filter, или даже backgroundImage, чтобы добавить градиентный фон к родительскому элементу SVG. И вы также можете анимировать SVG.

Фоны с видео YouTube

Нажмите Расширенный фон и выберите youtubeElement. Это создаст отдельный HTML элемент <div><iframe /></div> внутри для встраивания видео YouTube. Вы можете вставить туда ссылку на ваше видео YouTube.

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