如何在 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 的模式和混合模式吗？ 让我们在评论中知道！