如何在 Divi 背景圖像上使用圖案混合模式
已發表: 2022-07-18Divi 的內置背景圖案設置允許您創建引人注目的設計並為您網站上的背景圖像添加一些風格。 您可以使用混合模式設置來微調圖案與背景圖像的混合方式。 結合背景圖像、圖案和混合模式，為您的佈局創建獨特的背景和設計元素。 有 24 種圖案可供選擇和 16 種混合模式，更不用說您可以用來微調圖案外觀的所有其他設置，天空是您背景設計的極限！
在本教程中，我們將向您展示如何將圖案混合模式添加到頁面上的背景圖像的幾個示例。 跟隨您自己重新創建這些外觀，或將它們作為靈感來創建您自己的定制設計。
讓我們開始吧！
搶先看
這是我們將在本教程中設計的內容的預覽。
第一個佈局
第二種佈局
第三個佈局
你需要什麼開始
在我們開始之前，安裝並激活 Divi 主題，並確保您的網站上有最新版本的 Divi。
現在，讓我們開始吧！
如何在 Divi 背景圖像上使用圖案混合模式
使用預製佈局創建新頁面
我們將從使用 Divi 庫中的預製佈局開始。 對於此設計，我們將使用 Marina Layout Pack 中的 Marina Landing Page。
向您的網站添加一個新頁面並為其命名，然後選擇使用 Divi Builder 選項。
在本示例中，我們將使用 Divi 庫中的預製佈局，因此選擇瀏覽佈局。
搜索並選擇 Marina Landing Page 佈局。
選擇使用此佈局將佈局添加到您的頁面。
現在我們已準備好構建我們的設計。
第一個佈局
對於我們的第一個設計，我們將在第一個標題圖像中添加一個 V 形圖案。 這將為標題增加一些視覺興趣。 由於我們將應用混合模式，圖案將更加微妙，並且仍然允許背景圖像可見。
首先，打開部分設置並導航到背景部分。 單擊圖案選項卡並選擇添加背景圖案。
接下來，選擇圖案類型。 如您所見，有許多不同的圖案可供選擇，它們都可以通過下面的圖案設置進一步自定義。
- 圖案類型：倒 V 形 2
添加圖案混合模式
最後，設置圖案混合模式。 我們將為此標題使用柔光混合模式。 這種混合模式使圖案更加微妙，因此不會分散背景圖像的注意力。
- 圖案混合模式：柔光
最終設計
這是我們第一個佈局的最終設計。
這是此設計的移動視圖。
第二種佈局
對於第二個佈局，我們將在 Marina 登錄頁面佈局的“工作原理”部分添加一個模式。 我們將使用覆蓋在背景圖像和漸變上的波浪圖案，這與頁面的航海主題很相配。 讓我們開始吧。
首先，導航到“工作原理”部分並打開“部分設置”。 打開背景設置，然後選擇圖案選項卡，然後單擊添加背景圖案。
對於這個設計，我們將使用 Waves 模式類型。
- 圖案類型：波浪
接下來，將圖案顏色更改為白色。
- 圖案顏色：#FFFFFF
添加圖案混合模式
現在我們可以將混合模式添加到我們的圖案中。 將圖案混合模式設置為疊加。 這種混合模式使背景圖像中的深色更暗，淺色更亮。 當混合模式添加到此部分時，白色波浪圖案會變成藍色陰影，創造出有趣的圖案效果，與此頁面的設計相得益彰。
- 圖案混合模式：疊加
最終設計
這是“工作原理”部分的最終設計。
這是移動設計。
第三個佈局
讓我們開始我們的第三個佈局。 對於這種佈局，我們將在“一流的安全和維修”部分的背景中添加一些不透明的斜條紋。
首先打開部分設置並導航到背景部分。 單擊圖案選項卡，然後選擇添加背景圖案。
選擇斜條紋圖案。
接下來，設置圖案顏色。
- 圖案顏色：rgba(255,255,255,0.25)
使用圖案變換設置水平翻轉圖案。 這是另一個可以幫助您根據自己的喜好微調模式的設置。
- 圖案變換：水平
添加圖案混合模式
最後，設置圖案混合模式。 對於這個設計，我們將使用亮度混合模式。 這與我們的圖案顏色相結合，為圖像添加了一個光幕，但仍然允許照片顯示出來。 通過這種設計，船的圖像從背景中更加突出，因為圖案增加了獨特的對比。
- 圖案混合模式：亮度
最終設計
這是本節的最終設計。
這是本節的移動設計。
最後結果
現在讓我們看看帶有圖案混合模式的頁面的完整設計。
最後的想法
添加圖案可能是為背景圖像增加視覺趣味的好方法，但有時圖案可能會壓倒背景圖像。 或者，也許您希望您的圖案顏色根據其背後的圖像而改變。 值得慶幸的是，Divi 帶有許多混合模式，因此您可以根據需要自定義圖案。 您可以使用不同的圖案組合、混合模式、圖案顏色、圖案尺寸和更多 Divi 設置，為您的背景圖像創建一個完全獨特的設計。
希望本教程能啟發您在您的網站設計中加入一些模式並使用混合模式！ 對於另一個使用圖案的設計教程，請查看本教程以學習創建微妙的背景圖案蒙版。 有關 Divi 可以使用的不同濾鏡、效果和混合模式的概述，請查看以下文章：第 1 部分和第 2 部分。您以前在背景圖像上使用過 Divi 的模式和混合模式嗎？ 讓我們在評論中知道！