如何使用渐变背景作为 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 的内置选项发挥创意。 更具体地说，我们使用径向背景和背景图像来创建背景蒙版。 如果您有任何问题或建议，请务必在下方评论区留言！