經過麥伊凡

2024 年 4 月 14 日

背景設計

您可以在元素上設定的背景樣式的概述：顏色、圖像、漸層、顏色疊加和影片。

*警告 01:23 — 這部分可能會影響視覺敏感的人。建議觀眾自行斟酌。

透過在元素上設定背景來控制外觀和可讀性。內 設計元素 的部分 自訂設定，您可以將背景圖像、漸層或顏色合併到大多數組件（影片和照片等媒體組件除外）。

自訂設定的設計元素部分。陰影已設定為透明。

您將學到以下：

背景燈罩
背景藝術品
混合
陰影疊加
背景膜

背景燈罩

您可以選擇在藝術品和電影之外的任何組件上應用背景陰影（儘管您可以利用藝術品和電影作為背景）。您可以透過提交顏色值（例如，十六進位、rgba 或顏色標題）或使用顏色選擇器選擇顏色來為任何元件實現背景顏色。背景陰影還可以整合到文字元件或文字元件內的特定文字細節。

有時，您可能會喜歡整個網站的背景色調一致。這就是 正文部分（所有頁面） 標籤被證明是有益的。

「樣式」面板中的「選擇器」欄位下拉列表，以反白顯示「正文部分（所有頁面）」標籤。

您可以設計 正文部分（所有頁面） 標籤有2種方法：

選擇 Body 組件並選擇 正文部分（所有頁面） 選擇器字段下拉清單中的標籤 設計設定
選擇任意組件並選擇 正文部分（所有頁面） 繼承選單中的標籤 - 所有元件都繼承設計 正文部分（所有頁面） 標籤

一旦確定了背景 正文部分（所有頁面），您引入的任何元件都將預設採用此背景設計。您不僅可以修改背景顏色，還可以修改任何設計特徵。在我們的 HTML 標籤教學中了解有關自訂標籤元件的更多資訊。

預設情況下，大多數組件都有半透明背景。某些元件（例如滑桿單元）附帶預設背景陰影，您可以透過在主滑桿元件上提交背景陰影來覆寫該預設背景陰影。

背景藝術品

Webflow 提供了多種修改背景藝術品的選擇。

用於將背景圖稿合併到「自訂」設定的「設計元素」部分中的選單。

要引入或更改背景藝術品：

去 設計元素 在裡面 設計設定
打 選擇藝術品 從資源面板中選擇藝術品。
勾選 @2x 方塊（將圖稿寬度設定為其原始大小的一半，以便在 HiDPI 裝置上進行銳利渲染）

若要使用背景膜，請將該組件替換為背景膜組件 新增面板.

背景圖尺寸

尺寸選項在選單中反白顯示，用於將背景圖稿合併到「自訂」設定的「設計元素」部分。

若要定義背景圖稿的尺寸，請使用自訂尺寸或預設之一：

風俗決定背景圖稿的寬度和/或高度。也可以使用百分比值。若要將背景圖稿調整為大於單位，請使用大於 100% 的任何百分比。
覆蓋縮放圖稿以填充並覆蓋組件的整個背景，覆蓋任何指定的寬度和高度。可根據組件的縱橫比、螢幕尺寸和藝術作品來裁剪藝術作品。
包含縮放背景圖稿以保持包含在元件內。該值也會覆蓋任何指定的寬度和高度。

背景圖稿縮放的「覆蓋」和「包含」選擇的比較。「覆蓋」會縮放圖稿以填滿並覆蓋元件的整個背景，而「包含」會縮放圖稿以保持包含在元件內。

背景藝術品位置

預設情況下，背景圖稿位於元件的左上角。調整背景的位置以修改圖稿在各種螢幕尺寸上的顯示方式。

您可以垂直和水平對齊圖稿。

此選單顯示突出顯示的位置設置，用於在“樣式”面板的“背景”部分中新增背景圖像。左側和頂部位置均設定為 50%。

風景背景水平平鋪在範例攝影網站的主頁上。

經過麥伊凡

更新於 2024 年 4 月 14 日

版圖設計