# Background 背景

## 背景

設定元素的背景讓您控制外觀和可讀性。在樣式面板的 "背景"部分，您可以為大多數元素添加背景圖像、漸變或顏色（視頻和圖像等媒體元素除外）。

1. 背景顏色
2. 背景圖片
3. 漸層
4. 顏色疊加
5. 背景視頻

## 背景顏色

透過輸入顏色值（十六進制＼rgba＼顏色名稱）或使用取色器選擇顏色，您可以在任何元素上設置一個背景顏色，除了圖像和視頻。

一旦設置了Body (All pages)的背景，您添加的任何元素都會默認為這個背景樣式。而且不僅可以對背景顏色進行修改，還可以對任何樣式屬性進行修改。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F3op2Rlr4MrJBghyCiOwC%2Fimage.png?alt=media\&token=3c5453b9-f094-4012-9a51-e5adfe140522)

您可以用2種方式為Body (All pages)標簽設置樣式。

1. 選擇Body元素，從樣式面板的選擇器字段下拉選擇Body (All pages)標簽
2. 選擇任何元素，從繼承菜單中選擇Body (All pages)標簽--所有元素都繼承Body (All pages)標簽的樣式。

大多數元素默認透明背景。有些元素有默認的背景顏色，則可以透過元素上設置的背景顏色來覆蓋。

## 背景圖片

在風格面板的背景部分，添加背景圖片的菜單。<br>

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FJzC0dhbSZ6gBFX0IOinO%2Fimage.png?alt=media\&token=d7b18212-ef2b-4a46-b425-a4ffa17b0855)

1. 滾動到樣式面板中的背景
2. 點擊選擇圖像，從資產面板中選擇一個圖像。
3. 勾選@2x（將圖像寬度設置為其原始尺寸的一半，以便在HiDPI設備上清晰地呈現出來）。

### 背景圖像大小

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FNkeKtcPMIU3crg7W1x3B%2Fimage.png?alt=media\&token=93290800-5234-43a5-b9b8-434b52482982)

在樣式面板的背景部分添加背景圖像的菜單中，尺寸選項被突出顯示。\
要指定背景圖像的大小，可以使用自定義尺寸或預設之一。

1. 自定義：決定了背景圖像的寬度和高度，可以使用百分比值。設置背景圖像的比例大於元素，使用高於100%的任何百分比。
2. Cover：將圖像縮放以填充並覆蓋整個元素的背景，覆蓋任何設定的寬度和高度。圖像可能會被修剪，這取決於元素的長寬比、屏幕尺寸和圖像的情況。
3. Contain：縮放背景圖像，使其包含在元素內。這個值也覆蓋了任何設定的寬度和高度。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F4T3UhhpYlBvZ782APiNq%2Fimage.png?alt=media\&token=163a29da-9667-41bf-a579-10f25244add2)

### 重複

默認情況下，背景圖像在垂直和水平方向上都會重復。\
您可以選擇水平、垂直或完全不重複背景。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FELj810r3ukqqdJDVFPjK%2Fimage.png?alt=media\&token=b73b70a6-fc1b-40bb-8c6f-374d039970a1)

您可以在背景設置中選擇滾動時背景圖像的行為。

不固定：圖像隨著頁面的滾動而滾動\
固定：圖像在滾動時保持原位

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F7rvwY2COHhUISItW1bFL%2Fimage.png?alt=media\&token=8bfb09cf-c7e2-4680-accf-ece5e95ae388)

## 漸層

漸層可以單獨使用，也可以在現有的背景顏色或圖像上使用。

1. 線性漸變

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FQcrePZMAUoFUILScAwKb%2Fimage.png?alt=media\&token=cb732e43-d21e-4b53-a250-7417090f94d5)

2\.  徑向漸變

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FGMB7KmnSaeQFwfYiUE75%2Fimage.png?alt=media\&token=5d7b066f-4062-40f0-bc29-70bb9daf0b56)

## 顏色疊加

您可以在任何背景上添加一個顏色覆蓋。使用顏色選擇器來選擇顏色，然後設定不透明度值。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FiZILGEGPdkhLg4ioZGxd%2Fimage.png?alt=media\&token=71967196-72d3-4b68-9432-aa676732c74e)

添加和堆疊多個背景圖像、梯度和顏色覆蓋，以創建分層效果。要重新排列背景圖層，把鼠標懸停在圖層上，點擊左邊的虛線垂直線。

點擊眼睛圖標來切換圖層的可見性。要刪除任何層，點擊垃圾桶的 "刪除 "圖標。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2Fhd7hYIDEPhtUzaHeDiVK%2Fimage.png?alt=media\&token=2190ecec-d2eb-4337-a1b3-5a77d8d01e71)

## 背景視頻

背景視頻是無聲的、循環的視頻，作為內容的特定部分的背景。這些視頻有助於吸引網站訪問者和抓住注意力。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FvsnnAgKXo4Wam6Q5ckGf%2Fimage.png?alt=media\&token=2a53f9da-bb31-4bb2-b17d-55be368dcd6d)

把背景視頻放到畫布上時，您會被提示上傳視頻。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FXPA6lGdlv4jMMzwMCKwG%2Fimage.png?alt=media\&token=2a871330-659b-4e18-a65c-08be7916c493)

### 視頻設置

背景視頻有三個默認的設置。循環視頻，自動播放視頻，以及播放/暫停按鈕。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FZnxjlFRZY44OgUxdsqp9%2Fimage.png?alt=media\&token=b59a7d7c-a10a-4f95-b6a8-08f010383f7a)

1. 循環視頻\
   啟用時，背景視頻會連續循環播放。
2. 自動播放視頻\
   啟用時，背景視頻在頁面加載時就開始播放。
3. 播放/暫停按鈕\
   在背景視頻上提供一個內置的播放/暫停按鈕，您的網站訪問者可以用它來開始和停止視頻。

### 支持的視頻格式

背景視頻接受小於30MB的視頻文件，格式如下：webm, mp4, mov, ogg。

背景視頻文件名不應包括空格或特殊字符（破折號除外），視頻應針對網絡進行優化以獲得最佳性能。

### 替換背景視頻

1. 雙擊視頻或進入設置面板來打開背景視頻設置。
2. 通過選擇元素並按回車鍵來訪問背景視頻設置。壹旦設置窗口打開，點擊替換視頻來上傳和轉碼壹個新視頻。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FFYH4VGtKt0xVhdy4fCkM%2Fimage.png?alt=media\&token=6e14cfb5-9e2a-4d11-9fb3-f46416ef1003)