• 主页
  • 文章
  • 主题
  • 5 个背景蒙版和图案叠加层，您可以将其应用于背景图像

5 个背景蒙版和图案叠加层，您可以将其应用于背景图像

已发表: 2022-08-08

借助 Divi 最新发布的背景蒙版和背景图案功能，您可以为您的网站创建一些独特的英雄版块。 英雄部分是您网站的第一部分，是访问者在滚动浏览您的网站之前首先看到的内容，因此引人注目很重要！ 结合 Divi 的背景图像、背景蒙版和背景图案选项，我们可以创建引人注目的英雄部分，从而为您的网站留下良好的第一印象。

这篇文章将向您展示如何创建五个独特的背景蒙版和图案叠加层，您可以将它们应用于背景图像以创建真正令人惊叹的英雄部分。 本教程将介绍创建每个英雄部分所需的基本步骤，并为您提供在几分钟内为您的网站创建引人注目的英雄部分所需的工具。

在此示例中，我们将使用在线课程布局包中的免费照片。 要使用相同的图像，请一直滚动到这篇文章的底部以下载全分辨率图像。

让我们开始吧！

我们创造什么

这是我们今天将在这篇文章中创建的五个英雄部分的快速浏览。

这些设计微妙，简单，但有影响力。

免费下载布局

如果您想从本教程下载预先设计的布局设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件
免费下载

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送终极 Divi 登陆页面布局包的副本，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将立即成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载以访问布局包。

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

如何下载和使用布局

要将部分布局导入 Divi 库，请执行以下操作：

  1. 导航到 Divi 库。
  2. 单击页面顶部的导入按钮。
  3. 在可移植性弹出窗口中，选择导入选项卡。
  4. 从您的计算机中选择下载文件（确保先解压缩文件并使用 JSON 文件）。
  5. 然后单击导入按钮。

成功导入布局后，它们将显示在您的 Divi 库中，并可在 Divi Builder 中使用。

现在，让我们进入教程！

你需要什么开始

在我们开始之前，您需要：

  1. 安装并激活 Divi 主题。
  2. 创建一个新页面，发布它，然后单击“Use The Divi Builder”按钮，在前端使用 Visual Builder 编辑页面。
  3. 选择“从头开始构建”选项。

现在我们有一个空白画布可以开始设计了！

如何创建 5 个背景蒙版和图案叠加层以应用于背景图像

首先，让我们创建英雄部分

我们所有的设计示例都使用相同的部分、行和列结构，所以现在让我们设置它们。

1.创建布局结构

在页面中添加一行，然后单击绿色的“+”图标以调出列结构并选择第一列，即一个全角列。

2.添加节距

现在我们已经设置了行和列，是时候为该部分添加间距了。

在间距选项卡下，更新以下内容：

  • 桌面：顶部 400 像素，底部 400 像素
  • 平板电脑：顶部 200 像素，底部 200 像素； 左右 25px
  • 电话：50px 顶部和 50px 底部； 左右 25px

如何设计英雄部分#1

让我们设计第一个英雄部分。

1.添加标题文字

单击灰色的“+”图标以调出模块库。 滚动到文本并单击以加载。

输入标题文本，然后在标题文本选项卡下，配置以下设置：

  • 字体系列：Work Sans
  • 字体颜色：白色#ffffff
  • 字体大小：
    • 桌面：3rem
    • 平板电脑：2.2rem
    • 电话：1.4rem

2.添加按键模块

添加一个按钮并配置这些设置：

  • 在文本选项卡类型下：了解更多
  • 在对齐选项卡下选择：居中
  • 单击使用自定义样式，然后配置：
    • 按钮文字大小：
      • 桌面：20px
      • 平板电脑：16px
      • 电话：14px
    • 按钮文字颜色：白色#ffffff
    • 按钮背景颜色：黑色#1d1d1d
    • 按钮边框宽度：0
    • 按钮边框半径：0
    • 按钮字母间距：3pt
    • 按钮字体：Work Sans
    • 按钮字体样式：大写

3.添加背景图片

现在我们已经设置了内容，是时候开始设计部分背景了。

  1. 导航到背景切换并单击第三个选项卡，图片选项卡，然后单击“添加背景图像”。
  2. 这将打开您的媒体库，您可以在其中选择一张照片或上传一张新照片。
  3. 选择照片后，单击右下角的“上传图像”按钮。

4.添加背景图案

现在我们已经设置了背景图像，让我们添加一个图案。

  • 在“背景”选项卡中，导航到第 5 个选项卡，即“图案”选项卡，然后单击“添加背景图案”。
  • 从下拉菜单中选择簇绒并配置以下设置：
    • 图案颜色 - rgba(255,255,255,0.31)
    • 模式变换：无
    • 图案尺寸：实际尺寸
    • 图案重复原点：左上角
    • 模式重复：重复
    • 混合模式：正常

5.添加背景蒙版

现在我们已经设置了背景图像和图案，让我们添加一个背景蒙版。

  • 在“背景”选项卡中，导航到第 6 个选项卡，即蒙版选项卡，然后单击“添加背景蒙版”。
  • 从下拉菜单中选择 Bean 并配置以下设置：
    • 蒙版颜色：rgba(0,0,0,0.36)
    • 蒙版纵横比：水平矩形
    • 面罩尺寸：拉伸填充

瞧！ 现在你有一个设计精美的英雄部分。

如何设计英雄部分#2

现在，让我们设计第二个英雄部分。

1.添加背景图像并将混合模式设置为叠加

选择您的背景图像，将混合模式设置为叠加，并添加 rgba(10,10,10,0.64) 的叠加颜色。

2.添加背景图案

现在我们已经设置了背景图像，让我们添加背景图案。

  • 在“背景”选项卡中，导航到第 5 个选项卡，即“图案”选项卡，然后单击“添加背景图案”。
  • 从下拉列表中选择簇绒并配置以下设置：
    • 图案颜色 - rgba(255,255,255,0.09)
    • 模式变换：无
    • 图案尺寸：封面
    • 图案重复原点：左上角
    • 模式重复：重复
    • 混合模式：正常

3.添加背景蒙版

现在我们已经设置了背景图像和图案，让我们添加一个背景蒙版。

  • 在“背景”选项卡中，导航到第 6 个选项卡，即蒙版选项卡，然后单击“添加背景蒙版”。
  • 从下拉菜单中选择Caret并配置以下设置：
    • 蒙版颜色：rgba(0,0,0,0.36)
    • 蒙版变换：无
    • 蒙版纵横比：水平矩形
    • 面罩尺寸：拉伸填充
    • 蒙版混合模式：正常

如何设计英雄第 3 节

现在，让我们设计第三个英雄部分。

1.添加背景图像并将混合模式设置为叠加

选择您的背景图像，将混合模式设置为叠加，并添加 rgba(10,10,10,0.39) 的叠加颜色。

2.添加背景图案

现在我们已经设置了背景图像，让我们添加背景图案。

  • 在“背景”选项卡中，导航到第 5 个选项卡，即“图案”选项卡，然后单击“添加背景图案”。
  • 从下拉列表中选择Diagonal Stripes 2并配置以下设置：
    • 图案颜色 - rgba(0,0,0,0.06)
    • 模式变换：无
    • 图案尺寸：实际尺寸
    • 图案重复原点：左上角
    • 模式重复：重复
    • 混合模式：正常

3.添加背景蒙版

现在我们已经添加了背景图像和图案，让我们添加背景蒙版。

  • 在“背景”选项卡中，导航到第 6 个选项卡，即蒙版选项卡，然后单击“添加背景蒙版”。
  • 从下拉菜单中选择三角形并配置以下设置：
    • 蒙版颜色：rgba(10,10,10,0.61)
    • 模式变换：无
    • 蒙版纵横比：水平矩形
    • 面罩尺寸：拉伸填充
    • 蒙版混合模式：正常

如何设计英雄第 4 节

现在，让我们设计第四个英雄部分。

1.添加背景图片

选择您的背景图像。

2.添加背景图案

现在我们已经添加了背景图像，让我们添加背景图案。

  • 在“背景”选项卡中，导航到第 5 个选项卡，即“图案”选项卡，然后单击“添加背景图案”。
  • 从下拉列表中选择微笑并配置以下设置：
    • 图案颜色 - rgba(0,0,0,0.2)
    • 模式变换：无
    • 图案尺寸：封面
    • 图案重复原点：左上角
    • 模式重复：重复
    • 混合模式：正常

3.添加背景蒙版

现在我们已经应用了背景图像和图案，让我们添加一个背景蒙版。

  • 在“背景”选项卡中，导航到第 6 个选项卡，即蒙版选项卡，然后单击“添加背景蒙版”。
  • 从下拉菜单中选择Corner Lake并配置以下设置：
    • 蒙版颜色：rgba(10,10,10,0.61)
    • 蒙版变换：水平
    • 蒙版纵横比：水平矩形
    • 面罩尺寸：封面
    • 蒙版位置：左中
    • 蒙版混合模式：正常

3.配置行设置

在我们开始之前，这个英雄部分有独特的行样式。 让我们设置一下。

  • 浆纱：
    • 宽度：80%
    • 最大宽度：800px
  • 行对齐：
    • 桌面：默认
    • 平板电脑：中心
    • 电话：中心
  • 间距：
    • 左：20vw

如何设计英雄第 5 节

现在，让我们设计第五个英雄部分。

1.添加背景图片

选择您的背景图像。

2.添加背景图案

现在我们已经设置了背景图像，让我们应用背景图案。

  • 在“背景”选项卡中，导航到第 5 个选项卡，即“图案”选项卡，然后单击“添加背景图案”。
  • 从下拉列表中选择Crosses并配置以下设置：
    • 图案颜色 - #ffffff
    • 模式变换：无
    • 图案尺寸：自定义尺寸
    • 图案宽度：10px
    • 图案高度：10px
    • 图案重复原点：左上角
    • 模式重复：重复
    • 混合模式：正常

3.添加背景蒙版

现在我们已经应用了背景图像和图案，让我们添加一个背景蒙版。

  • 在“背景”选项卡中，导航到第 6 个选项卡，即蒙版选项卡，然后单击“添加背景蒙版”。
  • 从下拉菜单中选择Diagonal Pills并配置以下设置：
    • 蒙版颜色：rgba(10,10,10,0.61)
    • 蒙版变换：水平
    • 蒙版纵横比：水平矩形
    • 面罩尺寸：封面
    • 蒙版位置：左中
    • 蒙版混合模式：正常

3.配置行设置

在我们开始之前，这个英雄部分有独特的行样式。 让我们设置一下。

  • 浆纱：
    • 宽度：80%
    • 最大宽度：800px
  • 行对齐：
    • 桌面：默认
    • 平板电脑：中心
    • 电话：中心
  • 间距：
    • 右：18vw

获取更多背景蒙版和图案设计！

如果您想要更多这样的设计，请查看这 12 个背景蒙版和图案设计，免费下载。

最后的想法

使用 Divi 的新背景蒙版和图案选项，为您的网站设计独特且引人注目的英雄部分很容易。 每个功能都有许多选项，可让您创建真正有创意的背景设计。 此外，您可以为任何 Divi Builder 元素添加背景图案和蒙版！ 设计选择是无穷无尽的。