如何将图像背景和框阴影选项与 Divi 结合使用

在这篇 Divi 帖子中，我们将向您展示如何组合图像模块的背景和阴影选项。 这篇文章旨在激发您的想象力，并向您展示新的 Divi 功能如何与现有功能配合使用，从而产生创造性的结果。 为了帮助您完成创作过程，我们创建了 4 种组合，我们将向您展示如何逐步重新创建。 让我们来看看这些例子。

第一个例子

桌面

移动的

第二个例子

桌面

移动的

第三个例子

桌面

移动的

第四个例子

桌面

移动的

如何将图像背景和框阴影选项与 Divi 结合使用

订阅我们的 YouTube 频道

第一个例子

既然我们已经向您展示了您可以从这篇文章中得到什么，让我们来看看如何在 Divi 中仅用几个步骤而不需要额外的 CSS 代码来重新创建以下示例：

添加两列行

第 1 列背景颜色

将两列行添加到标准部分并选择“rgba(12,113,195,0.11)”作为第 1 列的背景颜色。

间距

然后，转到“设计”选项卡。 将“200px”添加到第一列的顶部边距，将“150px”添加到第一列的底部填充。

将图像模块添加到第一列（桌面和平板电脑）

浆纱

然后，将图像模块添加到您创建的行的第一列。 此图像模块仅适用于台式机和平板电脑。 您需要做的第一件事是将宽度更改为“94%”。

间距

然后，打开间距子类别，启用“在图像下方显示空间”选项，将“-150px”添加到图像的顶部边距和“-110px”到图像的左边距。

盒子阴影

进一步向下滚动选项卡并将以下框阴影应用于图像：

• 框阴影水平位置：80px
• 框阴影垂直位置：80px
• 框阴影模糊强度：0px
• 框阴影传播强度：6px
• 阴影颜色：rgba(173,173,173,0.79)
• 框阴影位置：外阴影

能见度

最后，转到高级选项卡并禁用移动设备上的图像模块。

克隆图像模块（电话）

我们用于图像模块桌面版和平板电脑版的大多数设置对于移动版也是相同的。 这就是为什么我们要克隆图像模块并进行一些与移动屏幕匹配的其他更改。

更改框阴影

我们需要更改的第一件事是框阴影。 不要使用桌面设置，而是使用以下设置：

• 框阴影水平位置：33px
• 框阴影垂直位置：78px
• 框阴影模糊强度：0px
• 框阴影传播强度：6px
• 阴影颜色：rgba(173,173,173,0.79)
• 框阴影位置：外阴影
  

能见度

我们需要做的下一件也是最后一件事情是更改第二个图像模块的可见性。 不要在手机上禁用它，而是在平板电脑和台式机上禁用它。

第二个例子

接下来，我们有第二个例子，它在桌面上看起来像这样：

添加两列行

行渐变背景

向您正在处理的部分添加一个新的两列行，并为其使用以下渐变背景：

• 第一种颜色：rgba(237,240,0,0.55)
• 第二种颜色：rgba(255,255,255,0)
• 渐变类型：径向
• 径向：中心
• 起始位置：50.8%
• 结束位置：50.8%

浆纱

转到“设计”选项卡并启用“使此行全宽”选项。

间距

最后，将“200px”的顶部填充添加到第二列。

将图像模块添加到第一列

间距

完成行设置后，继续将图像模块添加到第一列。 打开“设计”选项卡中的“间距”子类别，并将“30px”添加到顶部、右侧、底部和左侧填充。

盒子阴影

向下滚动相同的选项卡并为 Box Shadow 子类别使用以下设置：

• 框阴影水平位置：0px
• 框阴影垂直位置：2px
• 框阴影模糊强度：56px
• 框阴影传播强度：12px
• 阴影颜色：rgba(0,0,0,0.3)
• 框阴影位置：外阴影

克隆图像模块并放置在第二列

第二列中图像模块的设置相同。 继续，克隆图像模块并将其放在第二列中。

第三个例子

继续，我们将向您展示如何实现以下结果：

添加一列行

第 1 列背景颜色

添加一个单列行并选择“rgba(193,145,163,0.6)”作为第一列的背景色。

添加图像模块

渐变背景图像

然后，向列中添加一个图像模块并为其使用以下渐变背景：

• 第一种颜色：#e2e2e2
• 第二种颜色：rgba(255,255,255,0)
• 渐变类型：线性
• 梯度方向：180度
• 起始位置：50%
• 结束位置：50%

边界

转到“设计”选项卡，并将以下设置应用于“边框”子类别：

• 使用边框：是
• 边框颜色：#000000
• 边框宽度：3px
• 边框样式：纯色

浆纱

接下来，将以下宽度添加到图像模块：

• 台式机：85%
• 平板电脑和手机：100%

间距

然后，打开 Spacing 子类别并将以下填充和边距应用于图像模块：

• 左边距：80px（桌面），0px（平板和手机）
• 顶部、右侧、底部和左侧填充：30px

盒子阴影

最后，使用以下设置添加框阴影：

• 框阴影水平位置：0px
• 框阴影垂直位置：0px
• 框阴影模糊强度：0px
• 框阴影传播强度：39px
• 阴影颜色：rgba(0,0,0,0.22)
• 框阴影位置：外阴影

第四个例子

最后; 我们将向您展示如何重新创建的最后一个示例如下所示：

添加两列行

首先添加一个两列的行。 与我们在本文中处理的先前示例不同，这一行不需要任何其他设置。

将图像模块添加到第一列

渐变背景

将图像模块添加到您刚刚创建的行的第一列，并为其使用以下渐变背景：

• 第一种颜色：rgba(255,255,255,0)
• 第二种颜色：rgba(92,0,158,0.46)
• 渐变类型：线性
• 梯度方向：138deg
• 起始位置：55%
• 结束位置：55%

间距

然后，转到“设计”选项卡并为“间距”子类别使用以下设置：

• 在图像下方显示空间：是
• 右填充：30px
• 底部填充：30px

将第二个图像模块添加到第一列

背景颜色

继续在上一个图像模块的正下方添加另一个图像模块，并使用“rgba(96,96,96,0.42)”作为其背景颜色。

间距

然后，转到“设计”选项卡并对“间距”子类别使用以下设置：

• 在图像下方显示空间：是
• 上边距：-250px（桌面）、-150（平板）、-100（手机）
• 右边距：-150px（桌面），0px（平板和手机）
• 左边距：150px
• 顶部填充：30px
• 左填充：30px

盒子阴影

最后，打开 Box Shadow 子类别并使用以下设置：

• 框阴影水平位置：0px
• 框阴影垂直位置：2px
• 框阴影模糊强度：0px
• 框阴影传播强度：24px
• 阴影颜色：#e2e2e2
• 框阴影位置：外阴影

最后的想法

我们在这篇文章中分享的例子只是 Divi 的框阴影和背景选项可以走多远的一小部分。 您可以使用图像模块创建独特的设计，以增强您网站的整体外观。 如果您有任何问题或建议； 确保您在下面的评论部分发表评论。

请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！

精选图片来自创意摊位/shutterstock.com