如何使用 Divi 的背景蒙版和图案变换设置

背景图案是给您的网站一些视觉风格并在人群中脱颖而出的好方法。 Divi 的新背景蒙版和图案变换设置可以通过多种方式组合以创建这些背景图案。 在这篇文章中，我们将看到如何使用 Divi 的背景蒙版和图案变换设置为您的 Divi 布局创建一些有趣的背景。

让我们开始吧。

预习

首先，这里看一下每个示例，其中包含桌面、电话和每个示例的替代选项。

示例一结果

普通版桌面

普通版手机

替代版本桌面

替代版本电话

示例二结果

普通版桌面

普通版手机

替代版本桌面

替代版本电话

示例三结果

普通版桌面

普通版手机

替代版本桌面

替代版本电话

Divi 背景蒙版和图案变换选项

Divi 的新背景蒙版和图案功能包括几个调整它们的选项。 调整包括水平和垂直翻转、旋转和反转。 要查看选项，请转到部分或行的背景设置，然后选择背景图案或背景蒙版选项卡。

添加图案或蒙版后，将出现变换设置。 只需单击您要使用的选项。 我们可以一起使用它们，并以我们想要的任何组合使用它们。

Divi 的蒙版和图案变换设置如何工作

下面的模式是默认设置的锯齿形。

我在下图中添加了一个图层博客蒙版。 让我们用这些来演示背景蒙版和图案变换设置是如何工作的。

水平翻转

这是水平翻转。 我已将变换设置应用于图案和蒙版。

垂直翻转

这是图案和蒙版的垂直翻转。

旋转

这个显示了图案和蒙版的旋转。

反相

此示例显示图案和蒙版的反转。

背景蒙版和图案变换组合

当然，我们也可以使用各种组合的变换设置。 这里有一些例子。

这个旋转图案并反转蒙版。

此示例使用垂直翻转、旋转和反转作为背景图案。 背景蒙版使用水平翻转、垂直翻转和旋转。

对于这个例子，我使用了水平翻转和旋转作为背景图案，垂直翻转和旋转作为背景蒙版。

背景蒙版和图案变换设置示例

接下来，让我们看看这些设置如何与 Divi 布局一起使用。 我们将使用一个部分作为我们的起点并创建三个示例。 我们将为它设置样式，然后使用转换设置为每个示例更改它。

对于我的示例，我使用的是 Divi 中提供的 Estate Planning 登录页面中英雄部分的修改版本。 这是我的部分。 修改简化了英雄部分以满足我们的需要。 它使用背景颜色背景：#92a5ab。

• 背景：#92a5ab

背景蒙版和图案变换设置示例一

我们的第一个示例为我们提供了一个垂直位于屏幕中心的拱门。 屏幕的一侧有簇绒图案。 然后，我们将创建一个替代版本，其中拱门朝向另一个方向。

背景图案

打开部分设置，向下滚动到背景，然后选择背景图案选项卡。 为背景图案选择簇绒，为图案变换选择反转。

• 背景图案：簇绒
• 模式变换：反转

背景蒙版

选择背景蒙版选项卡并为背景蒙版选择拱形。 将蒙版颜色更改为#616d72，并将蒙版变换设置为反转。 这完成了我们第一个带有簇绒的拱门版本。

• 背景蒙版：拱门
• 颜色：#616d72
• 蒙版变换：反转

示例一变体

接下来，让我们创建设计的变体。 只需将背景图案的蒙版变换更改为水平翻转和垂直翻转。 这会将拱形改变为面向另一个方向并改变图案，因此它看起来不仅仅是镜像。

• 蒙版变换：水平翻转、垂直翻转

背景蒙版和图案变换设置示例二

对于我们的第二个示例，我们将在屏幕中央创建一个椭圆形，椭圆形内部有一个图案。 然后，我们将更改图案的位置。 我们还将针对不同的屏幕尺寸对此进行修改。

背景图案

在背景设置中，选择背景图案选项卡，然后选择 Shippo 作为图案。 将图案变换设置为反转。

• 背景图案：七宝
• 模式变换：反转

背景蒙版

接下来，选择背景蒙版选项卡。 选择 Eclipse 作为背景蒙版并将鼠标悬停在背景选项上。 选择出现的平板电脑图标。 这将打开设备设置。 对于桌面设置，将颜色设置为 #758489。 对于遮罩变换，选择水平翻转和旋转。 这样就完成了桌面版本。 让我们为移动版本更改它。

• 背景蒙版：Eclipse
• 颜色：#758489
• 蒙版变换：水平翻转、旋转

平板电脑和手机

平板电脑和手机都将使用相同的设置，因此我们只需要更改平板电脑设置。 选择Tablet 选项卡并将Mask Transform更改为 Horizo​​ntal Flipping。

• 蒙版变换：水平翻转、反转

示例二变体

接下来，我们将为第二个示例创建变体。 首先，选择背景图案选项卡并将图案颜色设置为 rgba(0,0,0,0.06)。

• 图案颜色：rgba(0,0,0,0.06)

接下来，选择背景蒙版选项卡并为蒙版变换选择水平翻转、旋转和反转。

• 蒙版变换：水平翻转、旋转、反转

平板电脑和手机

对于平板电脑和手机选项，请选择平板电脑图标。 将蒙版变换更改为水平翻转和反转。 示例二的替代版本现已完成。

• 蒙版变换：水平翻转、反转

背景蒙版和图案变换设置示例三

对于我们的第三个蒙版和图案变换设置示例，我们将使用带有油漆蒙版的蜂窝图案。 我们还将为此创建一个移动版本。

背景图案

首先，选择设备设置选项卡并选择桌面图标。 选择背景图案选项卡并选择蜂窝作为背景图案。 将颜色更改为 rgba(0,0,0,0.42)。 对于这个，我们将禁用模式转换选项。 我们将为备用版本添加它们。

• 背景图案：蜂窝
• 图案颜色：rgba(0,0,0,0.42)
• 模式变换：无

背景蒙版

接下来，选择背景蒙版选项卡。 为背景蒙版选择绘画。 将颜色更改为#697b82。 为蒙版变换选择垂直翻转。

• 背景蒙版：油漆
• 颜色：#697b82
• 蒙版变换：垂直翻转

接下来，为尺寸选择封面。 这会打开更多选项。 选择位置的右下角。 桌面版就是这样。 接下来，我们将创建移动版本。

• 尺寸：封面
• 位置：右下

平板电脑和手机

接下来，选择数位板选项卡并将背景蒙版变换更改为垂直翻转和旋转。 这完成了我们第三个示例的样式。 接下来，我们将创建备用版本。

• 背景蒙版变换：垂直翻转、旋转

示例三变化

对于本示例的替代版本，我们将同时调整背景图案和背景蒙版。

背景图案

对于背景图案，将图案颜色更改为 rgba(0,0,0,0.11)。 将图案变换更改为水平翻转、垂直翻转和旋转。

• 图案颜色：rgba(0,0,0,0.11)
• 图案变换：水平翻转、垂直翻转、旋转

背景蒙版

接下来，选择背景蒙版选项卡。 将颜色更改为白色，将蒙版变换更改为水平翻转、垂直翻转和反转。

• 颜色：#ffffff
• 蒙版变换：水平翻转、垂直翻转、反转

接下来，将遮罩尺寸更改为覆盖，然后为遮罩位置选择中心。

• 面罩尺寸：封面
• 面罩位置：中心

平板电脑和手机

最后，选择平板电脑选项卡以创建移动版本。 选择背景蒙版选项卡并选择蒙版变换的所有四个选项。 这完成了第三个示例的替代版本。

• 背景蒙版变换：水平翻转、垂直翻转、旋转、反转

结果

以下是每个示例的桌面、电话和替代选项。

示例一结果

普通版桌面

普通版手机

替代版本桌面

替代版本电话

示例二结果

普通版桌面

普通版手机

替代版本桌面

替代版本电话

示例三结果

普通版桌面

普通版手机

替代版本桌面

替代版本电话

结束的想法

这就是我们对如何使用 Divi 的背景蒙版和图案变换设置来创建许多有趣的背景设计的看法。 由于图案和蒙版可以一起使用，它们的变换设置也可以一起使用。 这会打开许多​​设计选项，为您提供更多工具来为您的 Divi 背景增添优雅。 学习使用它们的最好方法是玩弄调整，看看你能创造什么。

我们希望收到你的来信。 您是否在 Divi 布局中尝试过 Divi 的背景蒙版和图案变换设置？ 在评论中让我们知道。