如何在 Divi 中使用混合漸變疊加創建視差圖像背景
已發表: 2022-08-03在早期版本的 Divi 中，向視差背景圖像添加漸變疊加不是內置選項。 但是，使用 Divi 的新背景選項（和漸變生成器），您可以輕鬆創建具有無數漸變疊加設計的美麗視差背景。
在本教程中，我們將向您展示如何使用 Divi 的背景選項添加彩色漸變疊加層，該疊加層使用 True 和 CSS Parallax 方法與背景圖像混合。
搶先看
下面是我們將在本教程中構建的背景設計的快速瀏覽。
第一個具有漸變疊加層，顏色混合模式使用 True Parallax 方法在背景圖像上使用。
這是使用 CSS Parallax Method 的相同設計。 請注意，漸變保持固定/附加到背景圖像，因此它看起來是實際圖像的一部分，而不僅僅是一層。
下面是一個使用半透明色標但沒有混合模式的漸變疊加示例。
這個概念
這種設計的基本思想包括兩個步驟：
1. 使用漸變生成器為部分創建背景漸變，確保將漸變放置在背景圖像上方。
2. 將背景圖像添加到使用其中一種視差方法和顏色混合模式的同一部分。
這將允許彩色漸變在向下滾動頁面時覆蓋視差圖像。 顏色混合模式將漸變疊加與圖像合併，以獲得具有視差效果的精美圖像。
免費下載佈局
要掌握本教程中的設計，您首先需要使用下面的按鈕下載它。 獲得
訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為一個新
訂閱者，您將在每週一收到更多 Divi 福利和免費的 Divi Layout 包！ 如果你已經在
列表，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送終極 Divi 登陸頁面佈局包的副本，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將立即成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載以訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
要將部分佈局導入 Divi 庫，請執行以下操作：
- 導航到 Divi 庫。
- 單擊頁面頂部的導入按鈕。
- 在可移植性彈出窗口中，選擇導入選項卡
- 從您的計算機中選擇下載文件（確保先解壓縮文件並使用 JSON 文件）。
- 然後單擊導入按鈕。
完成後，部分佈局將在 Divi Builder 中可用。
讓我們進入教程，好嗎？
你需要什麼開始
要開始，您需要執行以下操作：
- 如果您還沒有，請安裝並激活 Divi 主題。
- 在 WordPress 中創建一個新頁面，並使用 Divi Builder 在前端（可視化構建器）編輯頁面。
- 選擇“從頭開始構建”選項。
- 現在有一塊空白畫布可以開始在 Divi 中進行設計！
如何在 Divi 中使用混合漸變疊加創建視差圖像背景
1. 創建填充行和標題文本
儘管我們將專注於本教程的部分背景設計，但添加填充行和標題以更好地了解設計在正常用例中的外觀是有意義的。
首先，將單列行添加到構建器中的現有部分。
接下來，將文本模塊添加到行/列。
文字設置
打開文本模塊的設置。 在內容選項卡下，將 H2 標題添加到正文內容。
<h2>Say Hello to Divi</h2>
在設計選項卡下，更新標題選項和最大寬度，如下所示：
- 標題 2 字體：Inter
- 標題 2 字體粗細：粗體
- 標題 2 文本顏色：#fff
- 標題 2 文字大小：8vw
- 標題 2 行高：1.2em
- 標題 2 文字陰影：見截圖
- 標題 2 文本陰影模糊強度：0.28em
- 標題 2 文字陰影顏色：#10076d
- 最大寬度：50%
行設置
現在標題已經到位，讓我們更新行大小和間距以使其更具響應性。
打開行設置。 在設計選項卡下，更新以下內容：
- 寬度：100%
- 最大寬度：80vw
- 填充：15vw 頂部，15vw 底部
2. 設計截面的漸變背景
現在填寫的內容已經完成，我們就可以開始設計我們的剖面漸變背景了。
背景漸變設置
打開該部分的設置。 在內容選項卡下，選擇背景選項下的漸變選項卡並更新漸變選項，如下所示：
- 漸變停止 1：#0094ff（0%）
- 漸變停止 2：#ff00c7（25%）
- 漸變停止 3：#0094ff（50%）
- 漸變停止 4：#ff00c7（75%）
- 漸變停止 5：#0094ff（100%）
- 漸變類型：圓形
- 漸變位置：左下
- 在背景圖像上方放置漸變：是
3.添加具有顏色混合模式的視差背景圖像
漸變設計完成後，我們就可以添加視差背景圖像了。 然後我們將應用顏色混合模式將漸變設計與背景圖像混合，以獲得美麗的視差背景設計。
背景圖像設置
在該部分的背景選項中，選擇背景圖像選項卡並上傳背景圖像。 更新如下：
- 使用視差效果：是
- 視差方法：真實視差
- 背景圖像混合：顏色
為什麼是顏色混合模式？
顏色混合模式將圖像的灰度版本與漸變的顏色（色調和飽和度）混合。 這使用全新的配色方案保留了圖像的視覺質量。
4.添加背景蒙版（為什麼不呢？）
為了完成設計，讓我們在標題後面添加一個背景蒙版，以使文本更加突出並強調視差效果。
背景蒙版設置
在該部分的背景選項中，選擇背景蒙版選項卡並更新以下內容：
- 面具：刀片
- 蒙版變換：水平翻轉、反轉
- 面罩尺寸：自定義尺寸
- 面罩寬度：72vw
- 蒙版位置：右上角
5.添加一些臨時滾動空間進行測試
在查看最終結果之前，我們需要在部分上方和下方添加一些空間，以便我們有足夠的滾動空間來查看實際的視差效果。 為此，只需將以下邊距添加到該部分：
- 邊距：80vh 頂部，80vh 底部
將部分添加到您自己的頁面時，不要忘記刪除此間距。
最終結果
讓我們看一下實時頁面上的最終結果。
這是使用 CSS Parallax Method 的相同設計。 請注意，漸變保持固定/附加到背景圖像，因此它看起來是實際圖像的一部分，而不僅僅是一層。
使用沒有混合模式的漸變疊加
雖然我喜歡這種設計的混合模式，但您可能會覺得需要為您的視差背景圖像使用更傳統的漸變疊加。
例如，您可以選擇不在設計中添加混合模式，而只是為每個漸變色標設置半透明顏色。 這將允許您在漸變疊加層後面看到更微妙的背景圖像表示。
為此，您可以將每種顏色的不透明度降低到 72% 左右，然後將背景圖像混合選項設置回正常。
這是一個看起來像的例子。
嘗試更多漸變！
漸變生成器可以創建更多顏色和漸變類型，您可以使用這些顏色和漸變類型使這些分層背景設計脫穎而出。 您可以查看我們關於更多背景漸變設計可能性的現場演示。
最後的想法
使用 Divi 的內置背景選項可以輕鬆創建具有混合漸變疊加的視差背景設計。 它確實為您提供了前所未有的 Divi 中 Photoshop 的強大功能。 隨意探索具有無數漸變色標和位置的不同顏色組合。 此外，您還可以嘗試不同的混合模式。
希望這對您自己的網站或下一個項目會派上用場。
我期待在評論中收到您的來信。
乾杯!