如何将 CSS 背景滤镜效果添加到 Divi 中的粘性标题

已发表: 2021-07-21

添加 CSS 背景滤镜效果是一种有趣且独特的方式来提升粘性标题菜单的设计。 使背景过滤器 CSS 属性如此独特的原因在于，它允许您将过滤效果应用于元素后面的区域。 这是粘性标题的完美选择，因为在向下滚动页面时可以神奇地更改标题后面的页面设计。 您可能已经在 apple.com 等热门网站上看到过这种效果。

在本教程中，我们将向您展示如何向 Divi 中的粘性标题添加 CSS 背景滤镜效果。 首先，我们将解释将背景滤镜效果添加到现有标题的简单过程，包括 3 个简单步骤。 之后，我们将分解如何从头开始构建整个标题。

让我们开始吧！

抢先看

这是我们将在本教程中构建的设计的快速浏览。

请注意在滚动时应用于标题后面元素的模糊和饱和度滤镜效果。

有关添加到标题中的此背景滤镜效果的简单现场演示，请查看此代码笔。

免费下载全局标题模板

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

下载文件
免费下载

免费下载

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

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

如何上传模板

转到 Divi 主题生成器

要上传模板，请导航到 WordPress 网站后端的 Divi Theme Builder。

Divi 的 Bushcraft 布局包的页眉和页脚模板

上传全局默认网站模板

然后，在右上角，您会看到一个带有两个箭头的图标。 单击该图标。

Divi 的 Bushcraft 布局包的页眉和页脚模板

导航到导入选项卡，上传您可以在本文中下载的 JSON 文件，然后单击“导入 Divi 主题生成器模板”。

Divi 的 Bushcraft 布局包的页眉和页脚模板

保存 Divi 主题生成器更改

上传文件后，您会注意到默认网站模板中有一个新的全局页眉和页脚。 一旦您希望激活模板，请立即保存 Divi Theme Builder 更改。

Divi 的 Bushcraft 布局包的页眉和页脚模板

让我们进入教程，好吗？

将 CSS 背景滤镜效果添加到现有标题

演示该过程的最简单方法是将 CSS 背景滤镜效果添加到 Divi 中的现有标题。 真的，它归结为这三个简单的步骤：

  1. 为页眉部分添加半透明背景色
  2. 将背景过滤器自定义 CSS 添加到标题部分
  3. 向标题部分添加粘性位置

以下是在 Divi 中的操作方法。

在主题生成器中编辑标题

导航到 Theme Builder 并单击以编辑现有的 Header 模板。

为部分添加半透明背景色

打开包含标题菜单元素的部分的设置。 然后为该部分添加半透明背景色。 在此示例中，我们为该部分提供以下背景颜色：

  • 背景颜色：rgba(0,0,0,0.8)

添加背景过滤器自定义 CSS

接下来，我们可以在部分的主元素中添加带有自定义 CSS 片段的背景滤镜效果（使用背景滤镜 CSS 属性）。 在高级选项卡下，将以下 CSS 粘贴到主元素： 

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

这些滤镜效果类似于所有 Divi 元素内置的滤镜效果。 主要区别在于背景滤镜将效果添加到其后面的元素，而 Divi 的内置滤镜效果将效果添加到元素本身。

在这里，我们使用了 2 种滤镜效果（饱和和模糊），它们会将滤镜效果应用于该部分后面的任何设计元素。

随意探索添加其他过滤器函数值（或这些值的组合）以创建您自己的独特设计。 其中最有用的包括：

  • 模糊（）
  • 亮度（）
  • 对比（）
  • 灰度（）
  • 色调旋转（）
  • 倒置（）
  • 棕褐色（）
  • 饱和（）

将粘性位置添加到标题

最后，确保给标题部分一个粘性位置。

最后结果

这是在实时页面上查看最终结果。 请注意在滚动时应用于标题后面元素的模糊和饱和度滤镜效果。

从头开始构建带有 CSS 背景滤镜效果的标题

如果您想从头开始使用 CSS 背景滤镜效果构建整个标题，请按以下步骤操作。

在主题生成器中构建全局标题

导航到 Theme Builder 并单击以构建新的全局标题。

使用 CSS 背景滤镜效果创建粘性部分

让我们开始创建一个带有 CSS 背景滤镜效果的粘性部分，就像我们在本教程的第一部分中所做的那样。

在全局标题布局编辑器中，向该部分添加一列行。

打开该部分的设置。 然后将以下半透明背景色添加到该部分：

  • 背景颜色：rgba(0,0,0,0.8)

更新填充如下：

  • 填充：0px 顶部，0px 底部

接下来，我们可以在部分的主元素中添加带有自定义 CSS 片段的背景滤镜效果（使用背景滤镜 CSS 属性）。 在高级选项卡下，将以下 CSS 粘贴到主元素： 

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

最后，确保给标题部分一个粘性位置。

  • 粘滞位置：粘在顶部

编辑行设置

现在该部分已完成，打开行设置并更新以下内容：

  • 天沟宽度：1
  • 宽度：95%
  • 填充：顶部 20 像素，底部 20 像素

添加徽标图像

更新行设置后，将图像模块添加到行/列以创建徽标。

将徽标图像上传到图像模块。

更新图像设计设置如下：

  • 宽度：50px
  • 边距：右 0px

创建菜单

接下来，在图像模块下添加一个菜单模块。

在内容选项卡下，选择一个菜单并为该菜单设置透明背景色。

  • 背景颜色：rgba(0,0,0,0)

在设计选项卡下，更新菜单设计设置如下：

  • 样式：左对齐
  • 活动链接颜色：#fff
  • 菜单字体：蒙特塞拉特
  • 菜单字体粗细：半粗体
  • 菜单文字颜色：#fff
  • 文本对齐：居中
  • 下拉菜单背景颜色：#333
  • 下拉菜单行颜色：#fff
  • 下拉菜单文本颜色：#fff
  • 下拉菜单活动链接：#fff
  • 移动菜单背景：#333
  • 移动菜单文本颜色：#fff
  • 购物车图标颜色：#fff
  • 搜索图标颜色：#fff
  • 汉堡菜单图标颜色：#fff
  • 宽度：80%（桌面和平板电脑）

使用文本模块创建按钮

为了创建标题的小按钮，我们将使用一个文本模块。 在菜单下添加文本模块。

用作品“Shop”更新正文内容。 然后给文本模块一个白色的背景色。

  • 正文：“商店”
  • 背景颜色：#fff

在设计选项卡下，更新以下内容：

  • 文字字体：蒙特塞拉特
  • 文字字体粗细：半粗体
  • 文字文字颜色：#333
  • 文本行高：2em
  • 文本对齐：居中
  • 宽度：50px
  • 圆角：5px

此处文本模块与徽标图像具有相同的宽度。 当我们在具有自定义 CSS 的列上使用 flex 属性时，这将有助于完美对齐项目。

使用 CSS Flex 属性对齐列中的模块

将徽标、菜单和文本模块添加到列后，打开列设置并将以下自定义 CSS 粘贴到主元素： 

display:flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items:center;

保存标题布局和模板

完成后，请确保保存布局和模板。

最后结果

这是最终设计的另一个外观。 请注意在滚动时应用于标题后面元素的模糊和饱和度滤镜效果。

浏览器支持

不幸的是，背景过滤器 CSS 属性目前在 IE 和 Firefox 上不能很好地工作。 然而，后备将是给予该部分的半透明背景颜色，它仍然有效并且看起来很棒。

最后的想法

希望您的下一个项目将受益于具有良好背景过滤效果的标题。 在 Divi 中添加任何标题真的很容易，探索所有可用的不同过滤器函数值也很有趣。

我期待在评论中收到您的来信。

干杯!