# Background 背景
## 背景
設定元素的背景讓您控制外觀和可讀性。在樣式面板的 "背景"部分，您可以為大多數元素添加背景圖像、漸變或顏色（視頻和圖像等媒體元素除外）。
1. 背景顏色
2. 背景圖片
3. 漸層
4. 顏色疊加
5. 背景視頻
## 背景顏色
透過輸入顏色值（十六進制＼rgba＼顏色名稱）或使用取色器選擇顏色，您可以在任何元素上設置一個背景顏色，除了圖像和視頻。
一旦設置了Body (All pages)的背景，您添加的任何元素都會默認為這個背景樣式。而且不僅可以對背景顏色進行修改，還可以對任何樣式屬性進行修改。
您可以用2種方式為Body (All pages)標簽設置樣式。
1. 選擇Body元素，從樣式面板的選擇器字段下拉選擇Body (All pages)標簽
2. 選擇任何元素，從繼承菜單中選擇Body (All pages)標簽--所有元素都繼承Body (All pages)標簽的樣式。
大多數元素默認透明背景。有些元素有默認的背景顏色，則可以透過元素上設置的背景顏色來覆蓋。
## 背景圖片
在風格面板的背景部分，添加背景圖片的菜單。
1. 滾動到樣式面板中的背景
2. 點擊選擇圖像，從資產面板中選擇一個圖像。
3. 勾選@2x（將圖像寬度設置為其原始尺寸的一半，以便在HiDPI設備上清晰地呈現出來）。
### 背景圖像大小
在樣式面板的背景部分添加背景圖像的菜單中，尺寸選項被突出顯示。\
要指定背景圖像的大小，可以使用自定義尺寸或預設之一。
1. 自定義：決定了背景圖像的寬度和高度，可以使用百分比值。設置背景圖像的比例大於元素，使用高於100%的任何百分比。
2. Cover：將圖像縮放以填充並覆蓋整個元素的背景，覆蓋任何設定的寬度和高度。圖像可能會被修剪，這取決於元素的長寬比、屏幕尺寸和圖像的情況。
3. Contain：縮放背景圖像，使其包含在元素內。這個值也覆蓋了任何設定的寬度和高度。
### 重複
默認情況下，背景圖像在垂直和水平方向上都會重復。\
您可以選擇水平、垂直或完全不重複背景。
您可以在背景設置中選擇滾動時背景圖像的行為。
不固定：圖像隨著頁面的滾動而滾動\
固定：圖像在滾動時保持原位
## 漸層
漸層可以單獨使用，也可以在現有的背景顏色或圖像上使用。
1. 線性漸變
2\. 徑向漸變
## 顏色疊加
您可以在任何背景上添加一個顏色覆蓋。使用顏色選擇器來選擇顏色，然後設定不透明度值。
添加和堆疊多個背景圖像、梯度和顏色覆蓋，以創建分層效果。要重新排列背景圖層，把鼠標懸停在圖層上，點擊左邊的虛線垂直線。
點擊眼睛圖標來切換圖層的可見性。要刪除任何層，點擊垃圾桶的 "刪除 "圖標。
## 背景視頻
背景視頻是無聲的、循環的視頻，作為內容的特定部分的背景。這些視頻有助於吸引網站訪問者和抓住注意力。
把背景視頻放到畫布上時，您會被提示上傳視頻。
### 視頻設置
背景視頻有三個默認的設置。循環視頻，自動播放視頻，以及播放/暫停按鈕。
1. 循環視頻\
啟用時，背景視頻會連續循環播放。
2. 自動播放視頻\
啟用時，背景視頻在頁面加載時就開始播放。
3. 播放/暫停按鈕\
在背景視頻上提供一個內置的播放/暫停按鈕，您的網站訪問者可以用它來開始和停止視頻。
### 支持的視頻格式
背景視頻接受小於30MB的視頻文件，格式如下：webm, mp4, mov, ogg。
背景視頻文件名不應包括空格或特殊字符（破折號除外），視頻應針對網絡進行優化以獲得最佳性能。
### 替換背景視頻
1. 雙擊視頻或進入設置面板來打開背景視頻設置。
2. 通過選擇元素並按回車鍵來訪問背景視頻設置。壹旦設置窗口打開，點擊替換視頻來上傳和轉碼壹個新視頻。
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.tenten.co/docs-webflow/webflow-101/03-designer-jie-mian-zong-lan/background-bei-jing.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.