product icon
Документация
Выберите язык
EnglishEspañolPortuguês do BrasilDeutschFrançaisעִבְרִית日本語ItalianoNederlandsРусскийTürkçeBahasa Indonesia简体中文繁體中文한국어العربيةSvenska

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

Last updated on 11/1/2024@mrbirddev

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

Статический фотофон

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

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

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 для более подробной информации.

Установка фильтров на фоновое изображение

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

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

filter: grayscale(0.5)

filter: brightness(0.5)

filter: blur(5px)

Ознакомьтесь с документами MDN для более подробного введения.

Повторяющиеся узоры фонов

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

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

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

Видео фоны

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

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

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

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

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

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

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

Loading...