CSS backdrop-filter：給元素背景添加模糊與色調的高級濾鏡

在現代網頁設計中，半透明元素搭配背景模糊效果已成為流行趨勢 —— 從毛玻璃導航欄、模態框遮罩，到卡片懸停效果，這種設計能讓界面更具層次感和高級感。實現這一效果的核心 CSS 屬性，正是backdrop-filter。它能對元素背后的內容（而非元素自身）應用濾鏡，輕松實現模糊、色調調整等效果，讓界面瞬間提升質感。今天，我們就來解鎖這個打造高級視覺效果的利器。

一、認識 backdrop-filter：只作用于 “背后內容” 的濾鏡

backdrop-filter與我們熟悉的filter屬性類似，都能應用模糊、色調等濾鏡效果，但兩者的作用對象截然不同：

  • filter：作用于元素自身及其所有子元素（對元素內部內容生效）。

  • backdrop-filter：僅作用于元素背后的內容（即元素下方的背景、其他元素等），元素自身內容不受影響。

1.1 直觀對比：filter vs backdrop-filter

<div class="container"><div class="box filter">filter: blur(5px)</div><div class="box backdrop-filter">backdrop-filter: blur(5px)</div>
</div>

.container {background: url("background.jpg") center/cover;padding: 4rem;
}.box {width: 200px;height: 100px;margin: 1rem;padding: 1rem;border-radius: 8px;background: rgba(255, 255, 255, 0.5); /* 半透明背景 */
}.filter {filter: blur(5px); /* 模糊元素自身及內容 */
}.backdrop-filter {backdrop-filter: blur(5px); /* 模糊背后的背景圖 */
}

在這里插入圖片描述

  • filter效果：盒子內的文字和半透明背景都會被模糊，整體顯得渾濁。

  • backdrop-filter效果：盒子內的文字清晰可見，背后的背景圖被模糊，形成 “毛玻璃” 效果，層次分明。

這就是backdrop-filter的核心價值：在模糊背景的同時，保持元素自身內容的清晰，完美適配半透明 UI 組件。

1.2 基礎語法：簡單聲明即可生效

backdrop-filter的語法與filter一致，支持多種濾鏡函數，可單獨使用或組合使用：

/* 單個濾鏡 */
.element {backdrop-filter: blur(8px); /* 模糊效果 */
}/* 多個濾鏡（空格分隔） */
.element {backdrop-filter: blur(8px) brightness(0.8) contrast(1.2); /* 模糊+調亮+提高對比度 */
}/* 不應用任何濾鏡 */
.element {backdrop-filter: none;
}

要使backdrop-filter生效，元素通常需要滿足兩個條件：

  1. 元素自身有半透明背景（如background: rgba(255,255,255,0.3)），否則濾鏡效果無法顯現（背后內容被完全遮擋）。

  2. 元素背后有可被模糊的內容（如背景圖、其他元素），否則效果無意義。

二、常用濾鏡功能：打造多樣化視覺效果

backdrop-filter支持與filter相同的濾鏡函數，以下是在實際開發中最常用的幾種：

2.1 blur (px)：背景模糊（最常用）

blur()是backdrop-filter最常用的函數，通過像素值控制模糊程度（值越大越模糊），用于實現 “毛玻璃” 效果：

.glass-effect {background: rgba(255, 255, 255, 0.2); /* 半透明白色 */backdrop-filter: blur(10px); /* 模糊背后內容 */border: 1px solid rgba(255, 255, 255, 0.1); /* 半透明邊框增強質感 */
}

在這里插入圖片描述

效果：元素背后的內容被模糊處理，透過半透明背景呈現柔和的朦朧感，常用于導航欄、卡片組件。

2.2 brightness (值)：調整背景亮度

brightness()用于調亮或調暗背后內容，值為：

  • 0：完全黑色；

  • 1或100%：原始亮度；

  • 大于1：調亮（如1.5表示亮度增加 50%）；

  • 小于1：調暗（如0.5表示亮度降低 50%）。

.dimmed-bg {background: rgba(0, 0, 0, 0.3); /* 半透明黑色 */backdrop-filter: brightness(0.6); /* 背后內容亮度降低40% */
}

在這里插入圖片描述

效果：背后內容變暗，突出當前元素（如模態框的遮罩層，弱化背景內容）。

2.3 contrast (值)：調整背景對比度

contrast()用于提高或降低背后內容的對比度，值的含義與brightness()類似：

  • 0：完全灰色；

  • 1或100%：原始對比度；

  • 大于1：提高對比度（如1.2增強 20%）；

  • 小于1：降低對比度（如0.8減弱 20%）。

.high-contrast {background: rgba(255, 255, 255, 0.1);backdrop-filter: contrast(1.5) blur(4px); /* 提高對比度+輕微模糊 */
}

在這里插入圖片描述

效果：背后內容的明暗差異更明顯，搭配模糊使用可增強視覺層次感。

2.4 saturate (值)：調整背景飽和度

saturate()用于控制背后內容的色彩飽和度：

  • 0：完全黑白（無飽和度）；

  • 1或100%：原始飽和度；

  • 大于1：提高飽和度（如2表示飽和度翻倍）；

  • 小于1：降低飽和度（如0.5表示飽和度減半）。

.desaturated {background: rgba(255, 255, 255, 0.2);backdrop-filter: saturate(0.3) blur(8px); /* 低飽和度+模糊 */
}

在這里插入圖片描述
效果：背后內容色彩變淡，呈現復古或簡約風格，常用于強調當前元素的色彩。

2.5 hue-rotate (deg)：調整背景色調

hue-rotate()通過角度值（0deg-360deg）旋轉背后內容的色相，實現色調轉換：

.color-shift {background: rgba(255, 255, 255, 0.2);backdrop-filter: hue-rotate(180deg) blur(6px); /* 色調反轉+模糊 */
}

在這里插入圖片描述

效果：背后內容的顏色變為互補色（如紅色變青色、藍色變黃色），適合創意設計或主題切換場景。

2.6 組合濾鏡：實現復雜效果

多個濾鏡函數可組合使用，通過疊加效果打造獨特視覺體驗：

.complex-effect {backdrop-filter: blur(12px) brightness(0.9) contrast(1.1) saturate(0.8);
}

在這里插入圖片描述

組合邏輯：先模糊背后內容，再調暗 10%，提高對比度 10%，降低飽和度 20%，最終呈現柔和且略帶復古感的背景。

三、實戰場景：backdrop-filter 的經典應用

backdrop-filter在現代 UI 設計中應用廣泛，以下是幾個高頻場景及實現方案：

3.1 毛玻璃導航欄（最經典場景）

導航欄使用半透明背景 + 模糊效果，既不遮擋頁面內容，又能與背景融合，提升層次感：

<nav class="glass-nav"><div class="logo">Logo</div><ul class="menu"><li>首頁</li><li>產品</li><li>關于</li></ul>
</nav><div class="hero-bg"></div>
<!-- 背后的背景圖 -->

.glass-nav {position: fixed;top: 0;width: 100%;padding: 1rem 2rem;display: flex;justify-content: space-between;align-items: center;background: rgba(255, 255, 255, 0.15); /* 半透明白色 */backdrop-filter: blur(10px); /* 模糊背后的背景圖 */border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 增強邊緣感 */z-index: 100;
}.hero-bg {height: 100vh;background: url("hero.jpg") center/cover;
}

在這里插入圖片描述

效果：滾動頁面時，導航欄背后的背景圖會隨內容變化并保持模糊，導航文字和 Logo 清晰可見，營造輕盈通透的視覺效果。

3.2 模態框遮罩層

模態框彈出時，用backdrop-filter模糊背景內容，引導用戶聚焦彈窗：

<div class="modal-overlay"><div class="modal"><h3>提示</h3><p>這是一個模態框</p><button>確定</button></div>
</div>

.modal-overlay {position: fixed;inset: 0; /* 覆蓋全屏 */background: rgba(0, 0, 0, 0.3); /* 半透明黑色 */backdrop-filter: blur(5px); /* 模糊背后頁面內容 */display: flex;justify-content: center;align-items: center;z-index: 1000;
}.modal {width: 300px;padding: 2rem;background: white;border-radius: 8px;
}

在這里插入圖片描述

效果：彈窗背景（頁面內容）被模糊和暗化，突出模態框本身，增強交互引導性。

3.3 卡片懸停效果

為卡片添加懸停時的背景模糊效果，增強交互反饋：

<div class="card-container"><div class="card">卡片1</div><div class="card">卡片2</div><div class="card">卡片3</div>
</div>

.card-container {display: grid;grid-template-columns: repeat(3, 1fr);gap: 2rem;padding: 2rem;background: url("grid-bg.jpg") center/cover;
}.card {height: 200px;padding: 1rem;border-radius: 8px;background: rgba(255, 255, 255, 0.1);transition: all 0.3s ease;
}.card:hover {transform: translateY(-5px);background: rgba(255, 255, 255, 0.2);backdrop-filter: blur(8px); /* 懸停時模糊背后背景 */box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

在這里插入圖片描述

效果：未懸停時卡片與背景融合，懸停時卡片背后的背景模糊，配合上浮和陰影效果，增強層次感和交互體驗。

3.4 圖片疊加文字區域

在圖片上添加半透明文字區域，用模糊效果讓文字更易讀：

<div class="image-banner"><img src="banner.jpg" alt="風景圖" /><div class="banner-text"><h2>探索自然之美</h2><p>一起走進大自然的懷抱</p></div>
</div>

.image-banner {position: relative;width: 100%;height: 400px;overflow: hidden;
}.image-banner img {width: 100%;height: 100%;object-fit: cover;
}.banner-text {position: absolute;bottom: 0;left: 0;right: 0;padding: 2rem;color: white;background: rgba(0, 0, 0, 0.2); /* 半透明黑色 */backdrop-filter: blur(6px); /* 模糊背后的圖片 */
}

在這里插入圖片描述

效果：文字區域背后的圖片被模糊，降低了圖片細節對文字的干擾，提升可讀性。

四、避坑指南：使用 backdrop-filter 的注意事項

4.1 瀏覽器兼容性與降級處理

backdrop-filter兼容所有現代瀏覽器，但存在以下兼容問題：

  • 完全支持：Chrome 76+、Firefox 70+、Safari 9+、Edge 79+。

  • 不支持：IE 全版本、一些舊版 Android 瀏覽器。

在不支持的瀏覽器中，backdrop-filter會被忽略，導致效果缺失（僅顯示半透明背景）。可通過以下方式降級：

.element {background: rgba(255, 255, 255, 0.3);/* 現代瀏覽器：模糊效果 */backdrop-filter: blur(8px);/* 不支持backdrop-filter的瀏覽器：用純色背景替代半透明 */@supports not (backdrop-filter: blur(0px)) {background: rgba(255, 255, 255, 0.8);}
}

@supports規則用于檢測瀏覽器是否支持backdrop-filter，不支持時使用更實的背景色，確保文字可讀性。

4.2 性能影響：避免過度使用

backdrop-filter（尤其是blur()）是 GPU 加速的屬性，會消耗一定性能，過度使用可能導致頁面卡頓（尤其是在移動設備上）。優化建議：

  • 僅對關鍵 UI 元素使用（如導航欄、模態框），避免在列表項等大量元素上應用。

  • 控制模糊半徑（blur(px)）：值越大性能消耗越高，通常8px-12px是效果與性能的平衡點。

  • 避免在滾動容器內使用：滾動時會持續觸發 GPU 計算，可能導致掉幀。

4.3 元素必須 “看得見” 才能生效

backdrop-filter僅對元素背后的內容生效，若元素自身完全不透明（如background: white），則濾鏡效果無法顯現（背后內容被完全遮擋）。因此，元素通常需要設置半透明背景（rgba或hsla）：

/* 錯誤：完全不透明背景，濾鏡效果不可見 */
.bad-example {background: white;backdrop-filter: blur(8px);
}/* 正確：半透明背景，濾鏡效果可見 */
.good-example {background: rgba(255, 255, 255, 0.2);backdrop-filter: blur(8px);
}

五、總結

backdrop-filter通過對元素背后內容應用濾鏡，為現代 UI 設計提供了強大的視覺增強能力，其核心價值在于：

  • 實現毛玻璃效果：半透明背景 + 模糊背后內容，是打造高級感界面的標配。

  • 增強層次感：通過模糊、色調調整，區分前景元素與背景內容，提升界面深度。

  • 提升可讀性：在圖片或復雜背景上疊加文字時，模糊背景可降低干擾。

  • 豐富交互體驗：結合懸停、動畫等效果，創造更生動的用戶反饋。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/93781.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/93781.shtml
英文地址，請注明出處：http://en.pswp.cn/web/93781.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

檢索增強生成(RAG) 緩存增強生成(CAG) 生成中檢索(RICHES) 知識庫增強語言模型(KBLAM)

檢索增強生成(RAG) 緩存增強生成(CAG) 生成中檢索(RICHES) 知識庫增強語言模型(KBLAM)

以下是當前主流的四大知識增強技術方案對比&#xff0c;涵蓋核心原理、適用場景及最新發展趨勢&#xff0c;為開發者提供清晰的技術選型參考&#xff1a; &#x1f50d; 一、RAG&#xff08;檢索增強生成&#xff09;?? 核心原理?&#xff1a; 動態檢索外部知識庫&#xff0…
閱讀更多...
LLM（大語言模型）的工作原理 圖文講解

LLM（大語言模型）的工作原理 圖文講解

目錄 1. 條件概率&#xff1a;上下文預測的基礎 2. LLM 是如何“看著上下文寫出下一個詞”的&#xff1f; 補充說明&#xff08;重要&#xff09; &#x1f4cc; Step 1: 輸入處理 &#x1f4cc; Step 2: 概率計算 &#x1f4cc; Step 3: 決策選擇 &#x1f914; 一個有…
閱讀更多...
Python netifaces 庫詳解：跨平臺網絡接口與 IP 地址管理

Python netifaces 庫詳解：跨平臺網絡接口與 IP 地址管理

一、前言 在現代網絡編程中&#xff0c;獲取本機的網絡接口信息和 IP 配置是非常常見的需求。 例如&#xff1a; 開發一個需要選擇合適網卡的 網絡服務&#xff1b;在多網卡環境下實現 流量路由與控制&#xff1b;在系統診斷工具中展示 IP/MAC 地址、子網掩碼、默認網關&#x…
閱讀更多...
HTML應用指南：利用POST請求獲取上海黃金交易所金價數據

HTML應用指南：利用POST請求獲取上海黃金交易所金價數據

上海黃金交易所&#xff08;SGE&#xff09;作為中國唯一經國務院批準、專門從事黃金等貴金屬交易的國家級市場平臺&#xff0c;自成立以來始終秉持“公開、公平、公正”的原則&#xff0c;致力于構建規范、高效、透明的貴金屬交易市場體系。交易所通過完善的交易機制、嚴格的風…
閱讀更多...
C++常見面試題-1.C++基礎

C++常見面試題-1.C++基礎

一、C 基礎 1.1 語言特性與區別C 與 C 的主要區別是什么&#xff1f;C 為何被稱為 “帶類的 C”&#xff1f; 主要區別&#xff1a;C 引入了面向對象編程&#xff08;OOP&#xff09;特性&#xff08;類、繼承、多態等&#xff09;&#xff0c;而 C 是過程式編程語言&#xff1…
閱讀更多...
Tomcat里catalina.sh詳解

Tomcat里catalina.sh詳解

在 Tomcat 中&#xff0c;catalina.sh&#xff08;Linux/macOS&#xff09;或 catalina.bat&#xff08;Windows&#xff09;是 核心的啟動和關閉腳本&#xff0c;用于控制 Tomcat 服務器的運行。它是 Tomcat 的“主控腳本”&#xff0c;負責設置環境變量、啟動/關閉 JVM 進程&…
閱讀更多...
STM32之MCU和GPIO

STM32之MCU和GPIO

一、單片機MCU 1.1 單片機和嵌入式 嵌入式系統 以計算機為核心&#xff0c;tips&#xff1a;計算機【處理單元&#xff0c;內存 硬盤】 可以控制的外部設備&#xff0c;傳感器&#xff0c;電機&#xff0c;繼電器 嵌入式開發 數據源--> 處理器(CPU MCU MPU) --> 執行器 …
閱讀更多...
22_基于深度學習的桃子成熟度檢測系統（yolo11、yolov8、yolov5+UI界面+Python項目源碼+模型+標注好的數據集）

22_基于深度學習的桃子成熟度檢測系統（yolo11、yolov8、yolov5+UI界面+Python項目源碼+模型+標注好的數據集）

目錄 項目介紹&#x1f3af; 功能展示&#x1f31f; 一、環境安裝&#x1f386; 環境配置說明&#x1f4d8; 安裝指南說明&#x1f3a5; 環境安裝教學視頻 &#x1f31f; 二、數據集介紹&#x1f31f; 三、系統環境&#xff08;框架/依賴庫&#xff09;說明&#x1f9f1; 系統環…
閱讀更多...
數據結構：二叉樹oj練習

數據結構：二叉樹oj練習

在講今天的題目之前&#xff0c;我們還需要講一下二叉樹的以下特點&#xff1a; 對任意一顆二叉樹&#xff0c;如果度為0的節點個數是n0&#xff0c;度為2的節點個數是n2&#xff0c;則有n0n21. 證明&#xff1a;二叉樹總的節點個數是n&#xff0c;那么有nn0n1n2 二叉樹的度為…
閱讀更多...
RabbitMQ高級特性——TTL、死信隊列、延遲隊列、事務、消息分發

RabbitMQ高級特性——TTL、死信隊列、延遲隊列、事務、消息分發

目錄 一、TTL 1.1設置消息的TTL 1.2設置隊列的TTL 1.3兩者之間的區別 二、死信隊列 2.1死信的概念 2.2死信產生的條件&#xff1a; 2.3死信隊列的實現 死信隊列的工作原理 2.4常??試題 三、延遲隊列 3.1概念 3.2應用場景 3.3RabbitMQ 實現延遲隊列的核心原理 1…
閱讀更多...
神經網絡設計中關于BN歸一化（Normalization）的討論

神經網絡設計中關于BN歸一化（Normalization）的討論

在神經網絡的結構中&#xff0c;我們常常可以看見歸一化&#xff08;Normalization&#xff09;如BN的出現&#xff0c;無論是模型的backbone或者是neck的設計都與它有著重大的關系。 因此引發了我對它的思考&#xff0c;接下來我將從 是什么&#xff08;知識領域&#xff0c;誕…
閱讀更多...
MacOS 安全機制與“文件已損壞”排查完整指南

MacOS 安全機制與“文件已損壞”排查完整指南

1. 背景說明macOS 為了保護系統安全&#xff0c;內置了多個安全機制&#xff1a;機制作用是否影響第三方 AppSIP (System Integrity Protection)保護系統關鍵文件/目錄不被篡改高風險 App/驅動可能受限Gatekeeper限制未簽名/未認證 App 運行阻止“未知開發者” App文件隔離屬性…
閱讀更多...
package.json文件中的devDependencies和dependencies對象有什么區別？

package.json文件中的devDependencies和dependencies對象有什么區別？

前端項目的package.json文件中&#xff0c;dependencies和devDependencies對象都用于指定項目所依賴的軟件包&#xff0c;但它們在項目的開發和生產環境中的使用有所不同。1.dependencies&#xff1a;dependencies是指定項目在生產環境中運行所需要的依賴項。這些依賴項通常包括…
閱讀更多...
【最新版】CRMEB Pro版v3.4系統源碼全開源+PC端+uniapp前端+搭建教程

【最新版】CRMEB Pro版v3.4系統源碼全開源+PC端+uniapp前端+搭建教程

一.系統介紹 crmebPro版 v3.4正式發布&#xff0c;智能任務推送、動態標簽管理、商城AI生產力&#xff0c;煥然一新&#xff0c;不負期待&#xff01;頁面DIY設計功能全面升級&#xff0c;組件更豐富&#xff0c;樣式設計更全面&#xff1b;移動端商家管理&#xff0c;讓商城管…
閱讀更多...
AI 浪潮下 IT 從業者的職業展望：替代之惑與轉型之道

AI 浪潮下 IT 從業者的職業展望：替代之惑與轉型之道

一、引言1.1 科技變革的浪潮&#xff1a;AI 崛起與 IT 行業震蕩在當今科技飛速發展的時代&#xff0c;人工智能&#xff08;AI&#xff09;無疑是最具影響力的變革力量之一。從實驗室的前沿研究到廣泛的商業應用&#xff0c;AI 以驚人的速度滲透到各個領域&#xff0c;徹底改變…
閱讀更多...
DSP音頻算法移植優化工程師實戰

DSP音頻算法移植優化工程師實戰

以下以音頻FIR濾波器算法為例&#xff0c;完整演示從MATLAB原型 → Python驗證 → TI DSP C語言移植優化的全流程&#xff0c;包含關鍵代碼和優化技巧&#xff1a;關鍵優化技術解析&#xff1a; 內存訪問優化使用#pragma DATA_ALIGN確保64位對齊&#xff08;滿足LDDW指令要求&a…
閱讀更多...
Spark 運行流程核心組件（三）任務執行

Spark 運行流程核心組件（三）任務執行

一、啟動模式 1、standalone資源申請&#xff1a;Driver向Master申請Executor資源Executor啟動&#xff1a;Master調度Worker啟動Executor注冊通信&#xff1a;Executor直接向Driver注冊 2、YARNDriver向YARN ResourceManager(RM)申請AM容器RM分配NodeManager(NM)啟動AM&#x…
閱讀更多...
rabbitmq發送的延遲消息時間過長就立即消費了

rabbitmq發送的延遲消息時間過長就立即消費了

RabbitMQ延遲消息在設置過長時間后被立即消費的問題&#xff0c;通常與以下原因有關&#xff1a; TTL限制問題 RabbitMQ對消息TTL(Time To Live)有32位整數限制(0-4294967295毫秒)&#xff0c;約49.7天。超過該值的延遲時間會導致消息立即被消費解決方案&#xff1a;確保設置的…
閱讀更多...
kafka的pull的依據

kafka的pull的依據

1. 每次 pull() 是否必須在提交上一批消息的 offset 之后&#xff1f;絕對不需要&#xff01; 提交 offset 和調用 poll() (拉取消息) 是兩個完全獨立的行為。消費者可以連續調用 poll() 多次&#xff0c;期間完全不提交任何 offset。 這是 Kafka 消費者的正常工作模式。提交 o…
閱讀更多...
學習嵌入式的第二十一天——數據結構——鏈表

學習嵌入式的第二十一天——數據結構——鏈表

單向鏈表特點&#xff1a;存儲的內存空間不連續 。為了彌補順序存儲存劣勢。優勢 插入&#xff0c;刪除 O(1) 動態存儲 &#xff0c;在程序運行期間決定大小。劣勢&#xff1a; 不能隨機訪問 O(N) 節點-> 數據域指針域 順序表(數組) 只有數據域鏈表的操作代碼&#xff1…
閱讀更多...
最新文章

Copyright @ 2022~2023