如果您希望更新部分的外观和感觉，这可能是您的理想帖子。 我们创建了 10 个不同的流体部分背景图像，您可以免费下载并在您正在构建的任何网站上使用。 最重要的是，我们还将向您展示如何将这些流体部分背景图像与 Divi 的内置选项结合起来。 您将能够为流体背景图像分配任何渐变背景，并将其与行渐变背景相结合，以确保您的内容也保持可读性。
让我们开始吧！
预览
让我们先看看 10 个不同的流体部分背景图像，您可以在帖子的后面进一步下载这些图像。 我们将图像与渐变背景相结合，创造出独特的效果。 我们还将在这篇文章中分享每种渐变组合，但您可以随意尝试不同的颜色以达到您想要的最终结果。
免费下载流体部分背景图像
要掌握免费的流体部分背景图像，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
重新创建部分
添加新的常规部分
间距
下载所有图像文件后，转到您的 WordPress 网站并打开一个新页面或现有页面。 然后，使用 Divi 的 Visual Builder，添加一个新的常规部分。 打开其设置并更改间距值。
- 顶部填充：0px
- 底部填充：0px
添加新行
立柱结构
继续使用以下列结构向您的部分添加新行：
浆纱
在不添加任何模块的情况下，打开行设置并更改大小设置。
- 使这一行全宽：是
- 使用自定义装订线宽度：是
- 天沟宽度：1
间距
也向 Spacing 设置添加一些填充值。
- 上边距：312px
- 底部填充：312px
- 列左填充：50px
- 列右填充：50px
添加文本模块
添加内容
是时候开始添加模块了！ 我们需要的第一个模块是文本模块。 继续在内容框中添加一些内容，最好是 H2 标题和段落。
H2 文本设置
接下来转到 H2 文本设置并应用以下更改：
- 标题 2 字体：蒙特塞拉特
- 标题 2 字体粗细：超粗体
- 标题 2 文本颜色：#FFFFFF
- 标题 2 文字大小：82 像素（桌面）、60 像素（平板电脑）、40 像素（手机）
- 标题 2 行高：1.4em
文字设置
更改整体文本设置。
- 文字颜色：#FFFFFF
- 文字大小：16px
- 文字行高：1.9em
- 文本方向：中心
浆纱
继续减小此模块在桌面上的宽度。
- 宽度：58%（桌面）、100%（平板电脑和手机）
- 模块对齐：中心
添加按钮模块
添加副本
我们需要的第二个也是最后一个模块是一个按钮模块。 在文本模块下面添加模块后，添加一些副本。
按钮对齐
接下来更改按钮对齐方式。
按钮设置
然后，转到按钮设置并进行一些更改。
- 为按钮使用自定义样式：是
- 按钮文字大小：18px
- 按钮文字颜色：#000000
- 按钮背景颜色：#FFFFFF
- 按钮边框宽度：0px
- 按钮边框半径：0px
- 按钮字母间距：-1px
- 按钮字体：蒙特塞拉特
- 字体粗细：超粗体
- 字体样式：大写
间距
最后但并非最不重要的一点是，通过添加一些顶部边距，在前一个模块和这个模块之间添加一些空间。
流体部分背景 #1
部分渐变背景
为您的部分使用以下渐变背景：
- 颜色 1：#000000
- 颜色 2：#2d5b9b
- 渐变类型：线性
- 渐变方向：137度
- 起始位置：48%
部分背景图像
上传’流体风格-1.png‘ 文件，您可以在下载文件夹中找到该文件并将其与以下背景设置相结合：
- 背景图像尺寸：实际尺寸
- 背景图像位置：中心
行渐变背景
最重要的是，在您的部分背景顶部添加一个行渐变。 这将使文本更具可读性。 它还将帮助您为页面增加一些深度。
- 颜色1：rgba(0,0,0,0.67)
- 颜色 2：rgba(255,255,255,0)
- 渐变类型：径向
- 径向：中心
流体部分背景 #2 & #3
部分渐变背景
第二和第三流体截面背景图像使用以下截面渐变背景：
- 颜色 1：#4f009e
- 颜色 2：#fa00ff
- 渐变类型：线性
- 渐变方向：137度
- 起始位置：48%
很多做跨境电商的朋友往往需要外国人的服务，比如录音、社媒代运营等等。我们整理出来很多低价且高质量的外国人服务商，分享给大家。
fiverr上15美元的海外社媒代运营服务
fiverr上25美元的Twitch设计服务
fiver上10美元的短视频广告投放服务
fiverr上15美元的视频编辑服务
fiverr上20美元的谷歌广告投放服务
fiverr上5美元的谷歌SEO服务
fiverr上10美元的英文文章撰写服务
fiverr上20美元的CMS网站建站服务
fiverr上40美元的手机APP开发服务
fiverr上30美元的linkedin代运营服务
fiverr上10美元的Guest Post做客博文服务
fiverr上15美元的红人营销服务
fiverr上20美元的discord运营服务
fiverr上15美元的社群维护服务
fiverr上10美元的shopify店铺优化服务
部分背景图像
上传’流体风格2.png‘ 或者 ‘流体风格3.png‘ 文件 哪一个 您可以在下载文件夹中找到并将其与以下背景设置相结合：
- 背景图像尺寸：实际尺寸
- 背景图像位置：中心
行渐变背景
还添加一个微妙的行渐变背景：
- 颜色1：rgba(255,48,75,0.13)
- 颜色 2：rgba(255,255,255,0)
- 渐变类型：径向
- 径向：中心
流体部分背景 #4
部分渐变背景
为您的部分使用以下渐变背景：
- 颜色 1：#00245e
- 颜色 2：#ffee00
- 渐变类型：线性
- 渐变方向：137度
- 起始位置：48%
部分背景图像
上传’流体风格4.png‘ 文件 哪一个 您可以在下载文件夹中找到并将其与以下背景设置相结合：
- 背景图像尺寸：实际尺寸
- 背景图像位置：中心
行渐变背景
最后，使用以下设置添加行渐变背景：
- 颜色 1：rgba(0,0,0,0.37)
- 颜色 2：rgba(255,255,255,0)
- 渐变类型：径向
- 径向：中心
流体部分背景 #5
部分渐变背景
将以下渐变背景添加到您的部分：
- 颜色 1：#04000f
- 颜色 2：#00436d
- 渐变类型：线性
- 渐变方向：137度
- 起始位置：48%
部分背景图像
然后，上传’流体风格5.png‘ 文件 哪一个 您可以在下载文件夹中找到并将其与以下背景设置相结合：
- 背景图像尺寸：实际尺寸
- 背景图像位置：中心
行渐变背景
使用以下行渐变背景完成您的设计：
- 颜色1：rgba(0,0,0,0.58)
- 颜色 2：rgba(255,255,255,0)
- 渐变类型：径向
- 径向：中心
流体部分背景 #6
部分渐变背景
使用以下令人惊叹的部分渐变背景组合：
- 颜色1：#4800ff
- 颜色 2：#c854ff
- 渐变类型：线性
- 渐变方向：137度
- 起始位置：48%
部分背景图像
上传’流体风格6.png‘ 文件 哪一个 您可以在下载文件夹中找到并将其与以下背景设置相结合：
- 背景图像尺寸：实际尺寸
- 背景图像位置：中心
行渐变背景
最后但同样重要的是，添加行渐变背景叠加。
- 颜色1：rgba(0,0,0,0.51)
- 颜色 2：rgba(255,255,255,0)
- 渐变类型：径向
- 径向：中心
流体部分背景 #7
部分渐变背景
将以下渐变背景设置应用于您的部分：
- 颜色一：#ff8300
- 颜色 2：#52006b
- 渐变类型：线性
- 渐变方向：137度
- 起始位置：48%
部分背景图像
上传’流体风格7.png‘ 文件 哪一个 您可以在下载文件夹中找到并将其与以下背景设置相结合：
- 背景图像尺寸：实际尺寸
- 背景图片位置：右上角
行渐变背景
最后，在您的部分顶部添加行渐变背景。
- 颜色1：rgba(106,0,198,0.34)
- 颜色 2：rgba(255,255,255,0)
- 渐变类型：径向
- 径向：中心
流体部分背景 #8
部分渐变背景
将以下蓝色渐变背景应用于您的部分：
- 颜色 1：#0b43dd
- 颜色 2：#09f9ed
- 渐变类型：线性
- 渐变方向：137度
- 起始位置：48%
部分背景图像
上传’流体风格8.png‘ 文件 哪一个 您可以在下载文件夹中找到并将其与以下背景设置相结合：
- 背景图像尺寸：实际尺寸
- 背景图片位置：左上角
行渐变背景
通过应用行渐变背景来完成您的设计。
- 颜色1：rgba(0,7,119,0.57)
- 颜色 2：rgba(255,255,255,0)
- 渐变类型：线性
- 径向：中心
流体部分背景 #9
部分渐变背景
将以下渐变背景添加到您的部分：
- 颜色 1：#051f89
- 颜色 2：#6d0272
- 渐变类型：线性
- 渐变方向：137度
- 起始位置：48%
部分背景图像
上传’流体风格9.png‘ 文件 哪一个 您可以在下载文件夹中找到并将其与以下背景设置相结合：
- 背景图片尺寸：封面
- 背景图像位置：中心
行渐变背景
最后但同样重要的是，使用行渐变背景增加内容的可读性。
- 颜色1：rgba(0,0,0,0.59)
- 颜色 2：rgba(255,255,255,0)
- 渐变类型：径向
- 径向：中心
流体部分背景 #10
部分渐变背景
最后一个例子需要以下部分渐变背景：
- 颜色 1：#051f89
- 颜色 2：#6d0272
- 渐变类型：线性
- 渐变方向：137度
- 起始位置：48%
部分背景图像
上传’流体风格-10a.png‘ 文件 哪一个 您可以在下载文件夹中找到并将其与以下背景设置相结合：
- 背景图像尺寸：实际尺寸
- 背景图片位置：左上角
行渐变背景
接下来添加行渐变背景。
- 颜色1：rgba(0,0,0,0.59)
- 颜色 2：rgba(255,255,255,0)
- 渐变类型：径向
- 径向：中心
行背景图像
也将背景图像添加到您的行。 寻找 ‘流体风格-10b.png‘ 在下载文件夹中，上传并结合以下背景设置：
- 背景图像尺寸：实际尺寸
- 背景图片位置：右下角
预览
现在我们已经完成了所有步骤，让我们来看看最终结果。
最后的想法
在这篇文章中，我们分享了 10 个不同且独特的流体部分背景图片，您可以在自己的网站上不受任何限制地使用它们。 最重要的是，我们还为您提供了令人惊叹的渐变背景，您可以仅使用 Divi 的内置选项将其与流畅的背景图像相结合。 如果您有任何问题或建议，请务必在下面的评论部分发表评论，让我们知道您最喜欢哪一张流畅的部分背景图片！
