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 的任何元素上設定。

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。

  1. 選擇一種圖案類型
  2. 然後您可以自定義圖案的選項。您可以嘗試點擊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 元素。因為它提供比我們自己託管視頻更好的流媒體優化。如果您需要自定義視頻上傳，請通過導航欄中的反饋按鈕告訴我們。

Loading...