背景樣式 - Webflow 幫助
了解如何設置元素的背景樣式：顏色、圖片、漸層、顏色覆蓋和影片。
背景顏色
您可以在任何元素上設置背景顏色，除了圖片和影片（雖然您可以使用圖片和影片作為背景）。通過輸入顏色值（例如，hex、rgba 或顏色名稱）或使用顏色選擇器來添加背景顏色。您還可以將背景顏色添加到文字元素或文字元素內的特定文字內容。
如果希望整個網站的背景顏色保持一致，請使用 Body (All pages) 標籤進行繼承。通過選擇 Body 元素並在樣式面板中選擇標籤或使用繼承菜單來設置樣式。對 Body (All pages) 的任何更改將默認應用於新元素。
大多數元素默認具有透明背景。一些元素，如滑塊組件，具有您可以覆蓋的默認顏色。
背景圖片
Webflow 提供了許多選項來自定義您的背景圖片。
要添加或更改背景圖片：
- 滾動到 Backgrounds 在 Style panel
- 從資產面板中點擊 Choose image
- 勾選 @2x 以在 HiDPI 設備上獲得更清晰的圖片
要設置背景影片，請使用添加面板中的 背景影片組件。
背景圖片大小
- 自定義：設置寬度/高度或百分比值。使用超過 100% 的值進行放大。
- 覆蓋：填充並覆蓋背景，可能會裁剪圖片。
- 包含：保持圖片在元素內部。
背景圖片位置
預設為左上角。您可以手動調整位置（px、%、VW、VH）。
平鋪
背景圖片預設會垂直和水平重複。可以控制水平、垂直重複或不重複。
固定或滾動
選擇不固定（圖片滾動）或固定（圖片保持不動）。固定圖片受視窗限制。
漸層
漸層可以單獨使用或與背景顏色/圖片疊加。兩種類型：
- 線性漸層
- 放射狀漸層
兩者都有顏色漸變的停駐點。
線性漸層
通過撥盤、箭頭（45度增量）或字段輸入設置方向。
漸層停駐點
編輯停駐點的顏色/不透明度。疊加在圖片上時，圖片在較低不透明度下可見。點擊添加停駐點，拖出以移除。
重複
切換漸層的重複。
反轉
反轉停駐點位置的圖標。
放射狀漸層
創建圓形漸層。左側停駐點為中心顏色。
位置
通過點選或手動輸入值/單位選擇焦點。
大小
預設控制：
- 最近邊：中心到最近邊
- 最近角：中心到最近角
- 最遠邊：中心到最遠邊
- 最遠角：（預設）
顏色覆蓋
使用顏色選擇器和不透明度為背景添加顏色覆蓋。
圖像和漸層的層疊
堆疊多個背景圖片、漸層和覆蓋以達到效果。通過拖動重新排序，使用眼睛圖標切換可見性，使用垃圾桶刪除。
背景影片
背景影片是無聲、循環播放的影片，用於背景以增添電影效果。請注意：
使用 快速查找 (CMD/CTRL+E) 或新增面板 > 元件來新增。上傳您的影片（<30MB；webm, mp4, mov, ogg）。檔名應避免空格/特殊字元。
上傳後會進行轉碼（mp4 和 webm 以支援瀏覽器）。
影片設定
- 循環播放影片：不斷重複播放。
- 自動播放影片：頁面載入時開始播放。
- 包含播放/暫停按鈕：訪客可以控制播放。
預覽背景影片
- 懸停縮圖
- 在新標籤中開啟
- 工具列中的預覽圖示
替換背景影片
開啟設定以替換影片、轉碼、預覽等。
將背景影片用作區塊
將內容放入背景影片元素中。在樣式面板中如常進行樣式設計。
背景影片覆蓋層
添加漸層或實色覆蓋層以增加對比。覆蓋層位於影片之上，內容之下。
這就是在 Webflow 中使用背景的方式！