如何使用漸變背景作為 Divi 的背景圖像蒙版

如果您熟悉 Photoshop 等圖像編輯軟件，那麼您可能也熟悉蒙版。 蒙版可幫助您將兩層結合在一起並創造出獨特的效果。 使用 Divi，您可以利用漸變背景和背景圖像在頁面中發揮創意並創建自己的蒙版。 在本教程中，我們將逐步向您展示如何為您正在處理的任何類型的設計創建 8 種不同的背景蒙版。 本教程將幫助您對頁面進行快速設計調整，而無需使用任何圖像編輯軟件。

讓我們開始吧！

預覽

在我們深入學習本教程之前，讓我們快速瀏覽一下不同屏幕尺寸下的結果。

讓我們開始創作吧！

訂閱我們的 YouTube 頻道

添加新部分

間距

向您的頁面添加一個新部分，打開部分設置並添加一些自定義的頂部和底部填充。

• 頂部填充：150px
• 底部填充：150px

添加新行

列結構

繼續使用以下列結構添加新行：

將 Blurb 模塊添加到 #1

添加內容

是時候開始添加模塊了！ 我們總共需要 8 個 Blurb 模塊。 我們將從第一個開始，進行一般更改並在對每個 Blurb 模塊進行獨特更改之前對其進行 7 次克隆。 將新的 Blurb 模塊添加到第一列並添加一些選擇的內容。

文字設置

轉到設計選項卡，然後更改文本設置。

• 文字方向：居中
• 文字顏色：深色

標題文字設置

也打開標題文本設置並更改內容。

• 標題字體：Antic Didone
• 標題文字大小：23px
• 標題行高度：1.5em

盒子陰影

最後，也為 Blurb 模塊添加一個微妙的框陰影。

• 框陰影模糊強度：80px
• 框陰影傳播強度：-10px
• 陰影顏色：rgba(0,0,0,0.3)

克隆 Blurb 模塊 7 次並在第二列中放置 4 個副本

完成所有整體更改後，您可以繼續克隆 Blurb 模塊 7 次。 在行的第二列中放置四個重複項，在第一列中保留三個。

修改模糊模塊 #1

漸變背景

現在我們可以開始為每個 Blurb 模塊添加獨特的設置。 打開第 1 列中的第一個 Blurb 模塊並為其添加漸變背景。

• 顏色 1：rgba(255,255,255,0)
• 顏色 2：#ffffff
• 漸變類型：徑向
• 徑向：底部
• 起始位置：45%
• 結束位置：45%
• 將漸變放在背景圖像上方：是

背景圖片

添加漸變背景後，您還可以添加背景圖像並將其與以下背景設置組合：

• 背景圖片位置：頂部中心
• 背景圖像重複：不重複

間距

最後但並非最不重要的一點是，添加一些自定義填充以使所有內容都到位。

• 頂部填充：100px
• 底部填充：350px
• 左填充：50px
• 右填充：50px

修改模糊模塊 #2

漸變背景

讓我們繼續下一個 Blurb 模塊（第二列中的第一個模塊）並添加漸變背景。

• 顏色 1：rgba(255,255,255,0)
• 顏色 2：#ffffff
• 漸變類型：徑向
• 徑向：右上
• 起始位置：45%
• 結束位置：45%
• 將漸變放在背景圖像上方：是

背景圖片

繼續添加與下面的背景設置相結合的背景圖像。

• 背景圖片位置：右上角
• 背景圖像重複：不重複

間距

並通過在間距設置中添加自定義填充值來完成設計。

• 頂部填充：350px
• 底部填充：100px
• 左填充：50px
• 右內邊距：200px（桌面和平板電腦），50px（手機）

修改模糊模塊 #3

漸變背景

轉到第三個模糊模塊（第一列中的第二個模糊模塊）。 打開設置並添加漸變背景。

• 顏色 1：rgba(255,255,255,0)
• 顏色 2：#ffffff
• 漸變類型：徑向
• 徑向：左上角
• 起始位置：45%
• 結束位置：45%
• 將漸變放在背景圖像上方：是

背景圖片

接下來繼續添加背景圖像。

• 背景圖片位置：左上角
• 背景圖像重複：不重複

間距

並為模塊添加一些自定義填充以使其成形。

• 頂部填充：350px
• 底部填充：100px
• 左填充：200px（桌面和平板電腦），50px（手機）
• 右填充：50px

修改模糊模塊 #4

漸變背景

進入第二列中的第二個模塊！ 打開 Blurb 模塊的設置並添加漸變背景。

• 顏色 1：rgba(255,255,255,0)
• 顏色 2：#ffffff
• 漸變類型：徑向
• 徑向：頂部
• 起始位置：45%
• 結束位置：45%
• 將漸變放在背景圖像上方：是

背景圖片

接下來繼續添加背景圖像。

• 背景圖片位置：頂部中心
• 背景圖像重複：不重複

間距

並通過在間距設置中添加自定義填充值來完成設計。

• 頂部填充：350px
• 底部填充：100px
• 左填充：50px
• 右填充：50px

修改模糊模塊 #5

漸變背景

進入下一個模塊，即第一列中的第三個模塊。 打開模塊並添加漸變背景。

• 顏色 1：rgba(255,255,255,0)
• 顏色 2：#ffffff
• 漸變類型：徑向
• 徑向：左
• 起始位置：35%
• 結束位置：35%
• 將漸變放在背景圖像上方：是

背景圖片

繼續添加與以下背景設置相結合的背景圖像：

• 背景圖片位置：左上角
• 背景圖像重複：不重複

間距

並在間距設置中添加一些自定義填充值。

• 頂部填充：100px
• 底部填充：100px
• 左填充：240px（桌面和平板電腦），150px（手機）
• 右內邊距：50px（桌面和平板電腦），20px（手機）

修改模糊模塊 #6

漸變背景

進入第二列中的第三個模塊！ 打開設置並添加漸變背景。

• 顏色 1：rgba(255,255,255,0)
• 顏色 2：#ffffff
• 漸變類型：線性
• 梯度方向：140度
• 起始位置：60%
• 結束位置：60%
• 將漸變放在背景圖像上方：是

背景圖片

接下來添加具有匹配背景設置的背景圖像。

• 背景圖片位置：頂部中心
• 背景圖像重複：不重複

間距

並在間距設置中使用一些自定義填充值來完成設計。

• 頂部填充：100px
• 底部填充：350px
• 左填充：50px
• 右內邊距：200px（桌面和平板電腦），50px（平板電腦）

修改模糊模塊 #7

漸變背景

第 1 列中的下一個 Blurb 模塊使用以下漸變背景：

• 顏色 1：rgba(255,255,255,0)
• 顏色 2：#ffffff
• 漸變類型：線性
• 梯度方向：220度
• 起始位置：60%
• 結束位置：60%
• 將漸變放在背景圖像上方：是

背景圖片

還要添加背景圖像。

• 背景圖片位置：頂部中心
• 背景圖像重複：不重複

間距

並在間距設置中添加所需的自定義填充值。

• 頂部填充：100px
• 底部填充：350px
• 左填充：200px（桌面和平板電腦），50px（手機）
• 右填充：50px

修改模糊模塊 #8

漸變背景

進入最後一個 Blurb 模塊！ 打開設置並添加漸變背景。

• 顏色 1：rgba(255,255,255,0)
• 顏色 2：#ffffff
• 漸變類型：徑向
• 徑向：右
• 起始位置：35%
• 結束位置：35%
• 將漸變放在背景圖像上方：是

背景圖片

接下來上傳背景圖片。

• 背景圖片位置：左上角
• 背景圖像重複：不重複

間距

並通過向模塊的間距設置添加一些自定義填充來完成設計和教程。

• 頂部填充：100px
• 底部填充：100px
• 左填充：50px（桌面和平板電腦），20px（手機）
• 右內邊距：240 像素（桌面和平板電腦），170 像素（手機）

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

最後的想法

在本教程中，我們向您展示瞭如何使用 Divi 的內置選項發揮創意。 更具體地說，我們使用徑向背景和背景圖像來創建背景蒙版。 如果您有任何問題或建議，請務必在下方評論區留言！