如果您熟悉 Photoshop 等图像编辑软件，您可能也熟悉蒙版。 面具可帮助您将两层结合在一起并创造出独特的效果。 使用 Divi，您可以发挥创意，并使用渐变背景和背景图像在页面内创建自己的蒙版。 在本教程中，我们将逐步向您展示如何为您正在处理的任何类型的设计创建 8 种不同的背景蒙版。 本教程将帮助您对页面进行快速设计调整，而无需使用任何图像编辑软件。
让我们开始吧！
预览
在我们深入教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
让我们开始创作吧！
订阅我们的 Youtube 频道
添加新部分
间距
向您的页面添加一个新部分，打开部分设置并添加一些自定义顶部和底部填充。
- 上边距：150px
- 底部填充：150px
添加新行
立柱结构
继续使用以下列结构添加新行：
将 Blurb 模块添加到 #1
添加内容
是时候开始添加模块了！ 我们总共需要 8 个 Blurb 模块。 我们将从第一个开始，进行一般更改，然后将其克隆 7 次，然后对每个 Blurb 模块进行独特的更改。 在第一列添加一个新的 Blurb Module 并添加一些选择的内容。
文字设置
转到设计选项卡，然后更改文本设置。
- 文本方向：中心
- 文字颜色：深色
标题文本设置
同时打开标题文本设置并进行更改。
- 标题字体：Antic Didone
- 标题文字大小：23px
- 标题行高：1.5em
盒子阴影
最后，为 Blurb 模块添加一个微妙的盒子阴影。
- 盒子阴影模糊强度：80px
- 盒子阴影传播强度：-10px
- 阴影颜色：rgba(0,0,0,0.3)
克隆 Blurb 模块 7 次并在第二列中放置 4 个重复项
完成所有整体更改后，您可以继续克隆 Blurb 模块 7 次。 将四个重复项放在该行的第二列中，并将三个放在第一列中。
修改模糊模块#1
渐变背景
现在我们可以开始为每个 Blurb 模块添加独特的设置。 打开第 1 列中的第一个 Blurb Module 并为其添加渐变背景。
- 颜色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
- 右内边距：200 像素（台式机和平板电脑），50 像素（手机）
修改模糊模块#3
渐变背景
转到第三个 Blurb 模块（第一列中的第二个 Blurb 模块）。 打开设置并添加渐变背景。
- 颜色1：rgba(255,255,255,0)
- 颜色2：#ffffff
- 渐变类型：径向
- 径向：左上
- 起始位置：45%
- 结束位置：45%
- 在背景图像上方放置渐变：是
背景图片
接下来继续添加背景图像。
- 背景图片位置：左上角
- 背景图像重复：无重复
间距
并为模块添加一些自定义填充以使其成形。
- 上边距：350px
- 底部填充：100px
- 左填充：200 像素（台式机和平板电脑），50 像素（手机）
- 右内边距：50px
修改模糊模块#4
渐变背景
进入第二列的第二个模块！ 打开模糊模块的设置并添加渐变背景。
- 颜色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
- 左填充：240 像素（台式机和平板电脑），150 像素（手机）
- 右内边距：50 像素（台式机和平板电脑），20 像素（手机）
修改模糊模块#6
渐变背景
进入第二列的第三个模块！ 打开设置并添加渐变背景。
- 颜色1：rgba(255,255,255,0)
- 颜色2：#ffffff
- 渐变类型：线性
- 渐变方向：140度
- 起始位置：60%
- 结束位置：60%
- 在背景图像上方放置渐变：是
背景图片
接下来添加具有匹配背景设置的背景图像。
- 背景图像位置：顶部中心
- 背景图像重复：无重复
间距
并使用间距设置中的一些自定义填充值完成设计。
- 上边距：100px
- 底部填充：350px
- 左填充：50px
- 右侧内边距：200 像素（台式机和平板电脑）、50 像素（平板电脑）
修改模糊模块#7
渐变背景
第 1 列中的下一个 Blurb 模块使用以下渐变背景：
- 颜色1：rgba(255,255,255,0)
- 颜色2：#ffffff
- 渐变类型：线性
- 渐变方向：220度
- 起始位置：60%
- 结束位置：60%
- 在背景图像上方放置渐变：是
背景图片
同时添加背景图像。
- 背景图像位置：顶部中心
- 背景图像重复：无重复
间距
并在间距设置中添加所需的自定义填充值。
- 上边距：100px
- 底部填充：350px
- 左填充：200 像素（台式机和平板电脑），50 像素（手机）
- 右内边距：50px
修改模糊模块#8
渐变背景
到最后一个 Blurb 模块！ 打开设置并添加渐变背景。
- 颜色1：rgba(255,255,255,0)
- 颜色2：#ffffff
- 渐变类型：径向
- 径向：右
- 起始位置：35%
- 结束位置：35%
- 在背景图像上方放置渐变：是
背景图片
接下来上传背景图片。
- 背景图片位置：左上角
- 背景图像重复：无重复
间距
并通过在模块的间距设置中添加一些自定义填充来完成设计和教程。
- 上边距：100px
- 底部填充：100px
- 左填充：50px（台式机和平板电脑），20px（手机）
- 右内边距：240 像素（台式机和平板电脑），170 像素（手机）
预览
现在我们已经完成了所有步骤，让我们最终看看不同屏幕尺寸的结果。
最后的想法
在本教程中，我们向您展示了如何使用 Divi 的内置选项发挥创意。 更具体地说，我们使用径向背景和背景图像来创建背景蒙版。 如果您有任何问题或建议，请务必在下面的评论部分发表评论！