設定背景

這裡有幾種在 slidde.co 上設定背景的方法。可以在 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 文檔 以獲取更深入的信息。

在背景圖片上設置濾鏡

這適用於 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，以便僅將其應用於圖像元素。