如何在 Divi 中使用混合渐变叠加创建视差图像背景

在早期版本的 Divi 中，向视差背景图像添加渐变叠加不是内置选项。 但是，使用 Divi 的新背景选项（和渐变生成器），您可以轻松创建具有无数渐变叠加设计的美丽视差背景。

在本教程中，我们将向您展示如何使用 Divi 的背景选项添加彩色渐变叠加层，该叠加层使用 True 和 CSS Parallax 方法与背景图像混合。

抢先看

下面是我们将在本教程中构建的背景设计的快速浏览。

第一个具有渐变叠加层，颜色混合模式使用 True Parallax 方法在背景图像上使用。

这是使用 CSS Parallax Method 的相同设计。 请注意，渐变保持固定/附加到背景图像，因此它看起来是实际图像的一部分，而不仅仅是一层。

下面是一个使用半透明色标但没有混合模式的渐变叠加示例。

这个概念

这种设计的基本思想包括两个步骤：

1. 使用渐变生成器为部分创建背景渐变，确保将渐变放置在背景图像上方。

2. 将背景图像添加到使用其中一种视差方法和颜色混合模式的同一部分。

这将允许彩色渐变在向下滚动页面时覆盖视差图像。 颜色混合模式将渐变叠加与图像合并，以获得具有视差效果的精美图像。

免费下载布局

要掌握本教程中的设计，您首先需要使用下面的按钮下载它。 获得
访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为一个新
订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果你已经在
列表，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送终极 Divi 登陆页面布局包的副本，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将立即成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载以访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将部分布局导入 Divi 库，请执行以下操作：

1. 导航到 Divi 库。
2. 单击页面顶部的导入按钮。
3. 在可移植性弹出窗口中，选择导入选项卡
4. 从您的计算机中选择下载文件（确保先解压缩文件并使用 JSON 文件）。
5. 然后单击导入按钮。

完成后，部分布局将在 Divi Builder 中可用。

让我们进入教程，好吗？

你需要什么开始

要开始，您需要执行以下操作：

1. 如果您还没有，请安装并激活 Divi 主题。
2. 在 WordPress 中创建一个新页面，并使用 Divi Builder 在前端（可视化构建器）编辑页面。
3. 选择“从头开始构建”选项。
4. 现在有一块空白画布可以开始在 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 的强大功能。 随意探索具有无数渐变色标和位置的不同颜色组合。 此外，您还可以尝试不同的混合模式。

希望这对您自己的网站或下一个项目会派上用场。

我期待在评论中收到您的来信。

干杯!