如何將 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 中添加任何標題真的很容易，探索所有可用的不同過濾器函數值也很有趣。

我期待在評論中收到您的來信。

乾杯!