设置背景

以下是在 slidde.co 上设置背景的几种方法。可以在 slidde.co 的任何元素上设置 CSS 背景。

静态照片背景

这是最常见的用例。

当您的背景图片正在加载或背景图片的一部分是透明时的备用颜色：

backgroundColor: #000

可以使用 slidde.co 上传图片 URL。您也可以在此处使用 CSS 渐变，slidde.co 提供了一些无代码方式的渐变预设：

backgroundImage: url("your_image_url")

大多数情况下，您可以使用 "cover" 来确保您的背景覆盖所有图像：

backgroundSize: cover

如果 backgroundSize: "cover" 隐藏了图像的重要部分，您可以调整它们的位置：

backgroundPosition: 50% 10px

如果您的背景图像不是可重复的图案，您可以将其设置为不重复：

backgroundRepeat: no-repeat

控制背景图像在您向下滚动页面时是否移动。通常，您需要一个不随滚动而移动的静态照片，因为它覆盖了页面：

backgroundAttachment: fixed

您可以查看 MDN 文档 以获取更深入的信息。

在背景图像上设置滤镜

这适用于 Page Slide Container。您可以点击 高级背景 并选择 imageElement。它将在容器内创建一个单独的 HTML <div><img /></div> 元素作为第一个元素。

然后，您可以对其应用诸如滤镜之类的 CSS 属性。例如，这里有三种方法可以在背景图像和前景文本之间创造更多对比，以提高可读性。

filter: grayscale(0.5)

filter: brightness(0.5)

filter: blur(5px)

查看 MDN 文档 以获取更深入的介绍。

可重复的图案背景

这适用于Page Slide Container。您可以点击高级背景并选择图案。

1. 选择一种图案类型
2. 然后您可以自定义图案的选项。您可以尝试点击启发我按钮，看看它会给您什么随机图案。

它将在内部创建一个单独的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，以便仅将其应用于图像元素。