设置背景
以下是在 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
如果您的背景图像不是可重复的图案，您可以将其设置为不重复：
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属性，如滤镜。例如，这里有三种方法可以在背景图像和前景文本之间创建更多对比，以提高可读性。
filter: grayscale(0.5)
filter: brightness(0.5)
filter: blur(5px)
查看MDN文档以获取更深入的介绍。
动画背景
点击高级背景并选择animated。
您可以选择各种动画背景预设。
通常，您可以配置动画背景的backgroundColor backgroundImage。一些预设还具有CSS变量，允许您配置颜色、间距或动画持续时间。
可重复图案背景
点击高级背景并选择pattern。
- 选择一种图案类型
- 然后您可以自定义图案的选项。您可以尝试点击
Inspire me按钮，看看它给您什么随机图案。
它将在内部创建一个单独的HTML <div><svg width="100%" height="100%" .../></div>元素。这意味着您也可以调整其CSS属性，如opacity、filter，甚至backgroundImage，以为SVG父元素添加渐变背景。您还可以为SVG添加动画。
YouTube视频背景
点击高级背景并选择youtubeElement。它将在内部创建一个单独的HTML <div><iframe /></div>元素以嵌入YouTube视频。您可以在那里粘贴您的YouTube URL链接。
目前只允许YouTube元素。因为它提供了比我们自己托管视频更好的流媒体优化。如果您需要自定义视频上传，请通过导航栏中的反馈按钮告知我们。