Elementor 是一款领先的 WordPress 页面构建器插件，它使网页设计变得前所未有的简单。其突出的功能之一是背景覆盖选项。通过正确利用该功能，您可以将网站的吸引力和美感提升到一个新的水平。
Elementor 为您提供了多种背景叠加选项。在本文中，我们将向您展示每个选项的分步指南。那么，让我们开始了解如何在 Elementor 中添加背景叠加以进行网页设计的文章。
什么是 Elementor 背景覆盖？
背景叠加层是半透明的图层，可添加到现有背景图像、图案或颜色之上。您可以使用不同的颜色、不透明度、渐变甚至图案自定义叠加层，以创建令人惊艳的视觉效果。
背景叠加是 Elementor 插件的一项核心功能，内置于插件中。免费版和付费版均可使用。当使用低质量图像或在任何背景顶部展示文本时，此功能特别有用。
Elementor 背景覆盖的类型
您可以在 Elementor 中添加三种类型的背景覆盖。 它们是：
1. 纯色覆盖：它只是向网页部分或元素添加纯色覆盖。您可以通过选择纯色及其不透明度级别来自定义此覆盖。
2. 渐变色叠加：渐变允许您向任何网页部分或元素的背景添加多色叠加效果。希望您已经知道什么是渐变。或者等一下，我们将在本文后面讨论它。
3. 图像叠加：此功能可让您在图像上应用纯色、纹理或图案叠加，以增强其吸引力。
特别说明关于 Elementor 背景覆盖
Elementor 中的背景覆盖选项允许您仅将覆盖添加到小部件背景，而不是内容背景。
您需要一个额外的插件（例如 HappyAddons）才能将叠加效果直接添加到内容背景。
因此，如果您的网站上同时安装了 Elementor 和 HappyAddons，则可以在需要的地方使用合适的背景覆盖选项。让我们探索这些方法。
方法一：如何在 Elementor 中向小部件背景添加覆盖
正如我们已经说过的，您可以在 Elementor 中添加三种类型的背景覆盖。现在我们将向您展示如何将所有这些类型的背景覆盖添加到 Elementor 小部件。
类型 01：向 Elementor 小部件添加纯色背景覆盖
希望您的部分和内容已准备就绪。单击整个部分的“编辑容器”图标。
转到样式选项卡。您将获得两个选项：背景和背景覆盖。使用这两个选项，您可以将背景覆盖添加到 Elementor。
例如，打开“背景”。选择“画笔”图标。下面，您将看到“颜色”选项，通过它可以为背景添加纯色。
您可以看到我们已经为小部件部分的背景覆盖选择了一种颜色。
类型 02：向 Elementor 小部件添加渐变色背景叠加
再次选择该小部件。转到“样式”选项卡。展开“背景”选项。
选择背景类型旁边的渐变选项。您将看到其下方出现更多颜色选项。
现在，选择主色和辅色来创建渐变调色板。您将看到颜色作为背景叠加层显示在小部件上。
因此，您可以为小部件背景创建渐变色背景叠加层。渐变中还有许多其他选项。希望您可以自己探索和使用它们。
类型 03：向 Elementor 小部件添加图像背景覆盖
对于图像叠加，您可以将图像和纯色领子组合使用。通过使用纯色与图像相结合，您可以创建完美的对比，以便上面的内容更清晰可见。让我们看看如何做到这一点。
转到样式选项卡。展开背景覆盖选项。单击图像选项。您可以从本地驱动器或媒体库中选择和添加图像。
您可以看到我们已将图像添加到背景叠加层。接下来，选择合适的位置，使其与内容完美契合。
展开“背景”选项。接下来，选择与图像相配的合适纯色。您会看到图像上已添加一层。
转到背景覆盖选项。
向下滚动 Elementor 面板进入混合模式。单击右侧的图标。它将打开混合模式列表。
通过浏览列表中的所有混合风格来选择您喜欢的风格。您将在图像上看到效果。
您可以看到背景覆盖和文本颜色几乎相似。这就是为什么我们更改了文本颜色以在它们之间形成对比，从而使文本具有高度可读性。
因此，您可以将背景覆盖添加到 Elementor 小部件的背景。
方法二：如何在 Elementor 中向内容背景添加覆盖
将内容叠加在背景上的过程与上面的方法完全相同。这是HappyAddons 插件的免费功能。如果你还不太了解该插件，请探索一下HappyAddons 是什么。
简而言之，HappyAddons是 Elementor 插件的一个令人兴奋的插件。它带有 120 多个附加小部件和 20 多个功能。使用它们，您可以克服 Elementor 的限制并为您的网站添加更多令人兴奋的功能。
那么，HappyAddons 中的背景覆盖选项在哪里？选择内容小部件。转到高级选项卡。您将在此选项卡下看到背景和背景覆盖选项。
可以看到这两个选项的名字和 Elementor 的两个选项的名字一模一样，而且它们的工作流程也是一样的，下面我们来探究一下。
类型 01：为添加的内容添加纯色背景叠加
选择内容小部件。转到Elementor 面板上的“高级”选项卡。展开“背景”选项。
选择纯色。您会看到该颜色已应用于内容的背景。
类型02：为添加的内容添加渐变色背景叠加
与上述方法类似，在“背景”下选择“渐变”选项。设置主色和次色。调色板将显示在 Elementor 画布上的内容后面。
类型 03：为添加的内容添加图像背景覆盖
选择内容小部件。转到“高级”选项卡。
展开背景覆盖选项。单击图像区域。
您将能够按照上述方法从本地驱动器或媒体库添加图像。希望您也可以在这里这样做。
现在文本颜色已更改，以使文本内容在背景上突出。希望这能让内容变得更好，更易读。
因此，您可以在 Elementor 中为您的内容添加图像背景覆盖。
注意： Elementor 插件通常会使网站速度稍微变慢。但有很多方法可以加快此类网站的速度。探索如何优化网站速度。
最后的注释！
如今，添加背景覆盖已成为大多数专业网站设计师的常见做法。这是一个简单易用的网页设计功能，但功能强大，可让您的网页部分和内容变得华丽而令人兴奋。
几年前，使用 HTML 和 CSS 语言创建背景覆盖确实非常困难。但 Elementor 使其变得灵活，这一点在 HappyAddons 插件中得到了进一步的提升。希望通过关注这篇博文，您现在能够在您的网站上创建引人入胜的背景和内容覆盖。
评论0