您想组合背景蒙版设置和图案变换选项吗 Divi 创造独特的背景？
背景设计是让您的 网站Web 视觉天赋，从人群中脱颖而出。 新的背景蒙版和图案变换设置来自 Divi 可以通过多种方式组合来创建这些背景图案。
在本文中，我们将看到如何使用背景蒙版和图案变换设置 Divi 为您的布局创建有趣的背景 Divi.
让我们开始。
概观
首先，这是每个示例在不同屏幕尺寸（手机和桌面）上的预览。
另请参阅： Divi：如何使用阴影和悬停效果创建交互式内容
例如1
桌面版本 1
手机上的版本 1
立即下载 DIVI！！！
桌面版本 2
手机上的版本 2
例如2
桌面版本 1
手机上的版本 1
立即下载 DIVI！！！
桌面版本 2
手机上的版本 2
例如3
桌面版本 1
电话版本 1
立即下载 DIVI！！！
桌面版本 2
手机上的版本 2
Divi 背景蒙版和图案变换选项
Divi 的新蒙版和背景图案功能包括几个调整它们的选项。 调整包括水平和垂直翻转、旋转和反转。 要查看选项，请转到部分或线条的背景设置，然后选择背景图案或背景蒙版选项卡。
添加图案或蒙版后，就会出现变换设置。 只需单击您要使用的选项。 我们可以一起使用它们，并以我们想要的任何组合使用它们。
Divi 的蒙版和图案变换设置如何工作
下面的模式是默认设置的锯齿形。
我们在下图中添加了一个图层博客蒙版。 让我们使用它们来演示背景蒙版和图案变换设置是如何工作的。
水平翻转
这是横向反转。 我们将变换设置应用于图案和蒙版。
垂直翻转
这是图案和蒙版的垂直翻转。
回转
这个显示了图案和蒙版的旋转。
逆转
此示例显示图案和蒙版的反转。
背景蒙版和图案变换组合
当然，我们也可以通过各种组合来使用变换参数。 这里有些例子。
这会旋转图案并反转蒙版。
此示例对背景图案使用垂直翻转、旋转和反转。 背景遮罩使用水平翻转、垂直翻转和旋转。
对于这个例子，我们对背景图案使用水平翻转和旋转，对背景蒙版使用垂直翻转和旋转。
背景蒙版和图案变换设置示例
接下来，让我们看看这些设置如何与 Divi 布局一起使用。 我们将使用一个部分作为起点并创建三个示例。 我们将对其进行自定义，然后使用转换设置为每个示例修改它。
对于我们的示例，我们使用的是布局登陆页面的 Hero 部分的修改版本 房地产规划 在 Divi 中可用。
以下是相关部分的概述。 它使用背景颜色：#92a5ab。
- 背景：#92a5ab
背景蒙版和图案变换参数示例 1
我们的第一个示例为我们提供了一个垂直位于屏幕中心的拱门。 屏幕的一侧有簇绒图案。 接下来，我们将创建一个替代版本，圆弧朝向另一方向。
背景图案
打开部分设置，向下滚动到 背景 并选择选项卡 背景图案。 为背景图案选择簇绒，为图案变换选择反相。
- 背景图案：簇绒
- 图案变换：反向
背景蒙版
选择选项卡 背景遮罩 然后选择 拱 为背景蒙版。 将蒙版颜色更改为#616d72，并将蒙版变换设置为反转。 这完成了我们第一个版本的带有簇绒的弓。
- 背景蒙版：拱门
- 面具颜色：#616d72
- 蒙版变换：反转
示例 1 版本 2
接下来，让我们创建设计的变体。 只需修改 掩码变换 用于水平翻转和垂直翻转的背景图案。 这会将拱形改变为面向另一个方向并偏移图案，因此它看起来不仅仅是镜像。
- 蒙版变换：水平翻转，垂直翻转
背景蒙版和图案变换参数示例 2
对于我们的第二个示例，我们将在屏幕中央创建一个椭圆形，椭圆形内部有一个图案。 接下来，我们将更改图案的位置。 我们还将针对不同的屏幕尺寸对此进行修改。
背景图案
在后台设置中，选择选项卡 背景图案 然后选择 景泰蓝 为动机。 将图案变换设置为反转。
- 图案背景：七宝
- 图案变换：反向
背景蒙版
然后选择标签 背景遮罩 并更改以下设置。
- 背景蒙版：椭圆
- 颜色：#758489
- 蒙版变换：水平翻转、旋转
平板电脑和手机
平板电脑和手机都将使用相同的设置，因此我们只需更改平板电脑设置。 选择 平板电脑选项卡 并修改 掩码变换 在水平反转中。
- 蒙版变换：水平翻转、反转
示例 2 版本 2
接下来，我们将为第二个示例创建变体。 首先，选择选项卡 背景图案 并将图案颜色设置为 rgba(0,0,0,0.06)。
- 图案颜色：rgba(0,0,0,0.06)
然后选择标签 背景遮罩 并为蒙版转换选择水平翻转、旋转和反转。
- Mask Transform：水平翻转、旋转、反转
平板电脑和手机
对于平板电脑和手机选项，选择 药片 。 修改 掩码变换 在水平反转和反转中。 示例二的替代版本现已完成。
- 蒙版变换：水平翻转、反转
背景蒙版和图案变换参数示例 3
对于我们的遮罩和图案变换设置的第三个示例，我们将使用带有油漆遮罩的蜂窝图案。 我们还将为此创建一个移动版本。
背景图案
首先，选择设备设置选项卡并选择设备图标。 办公室。 选择选项卡 背景图案 并选择 Honeycomb 作为背景图案。 将颜色更改为 rgba(0,0,0,0.42)。 对于这一点，我们将留下选项 模式变换 停用。 我们将为备用版本添加它们。
- 背景图案：蜂窝
- 图案颜色：rgba(0,0,0,0.42)
- 模式变换：无
背景蒙版
然后选择标签 背景掩码。 选择 喷漆 为背景蒙版。 将颜色更改为#697b82。 为遮罩变换选择垂直翻转。
- 背景蒙版：油漆
- 面膜颜色：#697b82
- 蒙版变换：垂直翻转
然后选择 保护套 尺寸。 这开辟了更多选择。 选择 右下 位置。 桌面版就是这样。 接下来，我们将创建移动版本。
- 面罩尺寸：封面
- 蒙版位置：右下
平板电脑和手机
然后选择标签 平板电脑和修改改造的 面膜 背景垂直翻转和旋转。 这完成了我们第三个示例的样式。 接下来，我们将创建备用版本。
- 蒙版变换：垂直翻转、旋转
示例 3 版本 2
对于此示例的替代版本，我们将同时调整背景图案和背景蒙版。
背景图案
对于背景图案，将图案颜色更改为 rgba(0,0,0,0.11)。 将图案变换更改为水平翻转、垂直翻转和旋转。
- 蒙版颜色：rgba(0,0,0,0.11)
- Mask Transform：水平翻转、垂直翻转、旋转
背景蒙版
然后选择标签 背景掩码。 将颜色更改为白色，将蒙版转换为水平翻转、垂直翻转和反转。
- 面具颜色：#ffffff
- 蒙版变换：水平翻转、垂直翻转、反转
接下来，将蒙版的大小更改为覆盖，然后选择“居中”作为蒙版的位置。
- 面罩尺寸：封面
- 面罩位置：中心
平板电脑和手机
最后选择tab 平板电脑 创建移动版本。 选择标签 背景蒙版 并选择四个蒙版变换选项。 这完成了第三个示例的替代版本。
- Mask Transform：水平翻转、垂直翻转、旋转、反转
最终结果
以下是每个示例在不同屏幕尺寸（台式机和手机）上的概述
例如1
桌面版本 1
电话版本 1
桌面版第 2 版
手机上的版本 2
例如2
桌面版第 1 版
电话版本 1
桌面版第 2 版
电话版本 2
例如3
桌面版本 1
电话版本 1
桌面版第 2 版
电话版本 2
立即下载 DIVI！！！
也可以看看： Divi：如何将团队成员部分创建为轮播
结论
这是我们看看如何使用 Divi 的背景蒙版和图案变换设置来创建许多有趣的背景图案。
由于图案和蒙版可以一起使用，它们的变换设置也可以一起使用。 这打开了许多设计选项，为您提供更多工具 为您的 Divi 背景增添优雅。
学习如何使用它们的最好方法是尝试调整并看看你能创造什么。
我们希望本教程能激发您的下一个 Divi 项目。 如果您有任何疑虑或建议，请联系我们 评论部分 讨论一下。
您也可以咨询 我们的资源，如果您需要更多的元素来执行创建Internet网站的项目，请参考我们关于 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.
但与此同时， 在您不同的社交网络上分享此文章.
...
