要實現css背景模糊效果，需使用backdrop-Filter屬性配合blur()函數，并確保元素具備正確的層疊上下文。1. 創建一個容器元素（如div），用于承載模糊背景和內容；2. 使用.backdrop-filter: blur(px)設置模糊效果，并通過z-index控制模糊層與內容的層級關系；3. 添加半透明背景色以增強模糊視覺效果；4. 為兼容舊瀏覽器，可使用filter: blur()作為備選方案；5. 若需動態模糊，可通過JavaScript監聽滾動事件并實時調整blur值。此外，使用@supports查詢可提升兼容性，在不支持backdrop-filter的瀏覽器中提供基礎樣式保障。
css添加背景模糊，其實就是利用backdrop-filter屬性，再配合blur()函數。簡單來說，就是這么回事。
backdrop-filter屬性允許你對元素后面的區域應用視覺效果，而blur()函數就是用來指定模糊程度的。是不是感覺很簡單？但魔鬼藏在細節里，咱們一步一步來。
解決方案
立即學習“前端免費學習筆記（深入）”；
首先，你需要一個元素作為背景模糊的容器。這個元素可以是div、section等等，隨便你喜歡。
<div class="blurred-background"> <div class="content"> <h1>這里是內容</h1> <p>一些文字描述...</p> </div> </div>
接下來，就是CSS部分了。關鍵就在于backdrop-filter: blur(px)。
.blurred-background { position: relative; /* 或者 fixed，取決于你的需求 */ width: 100%; height: 100vh; /* 或者你想要的任何高度 */ background-color: rgba(255, 255, 255, 0.1); /* 增加一層半透明的背景色，讓模糊效果更明顯 */ overflow: hidden; /* 防止內容超出容器 */ } .blurred-background::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("你的背景圖片.jpg"); /* 替換成你的背景圖片 */ background-size: cover; background-position: center; filter: blur(5px); /* 兼容性寫法，有些瀏覽器可能不支持backdrop-filter */ backdrop-filter: blur(5px); /* 核心屬性 */ z-index: -1; /* 確保模糊層在內容下面 */ } .content { position: relative; /* 確保內容在模糊層之上 */ z-index: 1; padding: 20px; color: white; /* 讓文字更清晰 */ }
解釋一下：
- position: relative; 和 position: absolute; 用于定位模糊層和內容層。
- background-image 設置背景圖片，background-size: cover; 讓圖片填充整個容器。
- filter: blur(5px); 是一個兼容性寫法，因為早期的瀏覽器可能不支持backdrop-filter。
- backdrop-filter: blur(5px); 是核心屬性，數值越大，模糊程度越高。
- z-index 控制元素的層疊順序，確保模糊層在內容下面。
- background-color: rgba(255, 255, 255, 0.1); 增加一層半透明的背景色，可以增強模糊效果。這個顏色的透明度可以根據你的需求調整。
為什么backdrop-filter有時候不起作用？
backdrop-filter不起作用，最常見的原因就是層疊上下文的問題。你需要確保應用backdrop-filter的元素有正確的層疊上下文。通常，這意味著你需要設置position: relative;或position: absolute;，并可能需要調整z-index。另外，如果元素沒有背景，backdrop-filter也可能看不到效果。可以嘗試添加一個半透明的背景色，例如background-color: rgba(0, 0, 0, 0.5);。還有一種情況是，如果你的背景圖片太簡單，或者顏色過于單一，模糊效果可能不明顯。嘗試更換一張顏色更豐富的背景圖片。
如何實現動態模糊效果？
動態模糊，聽起來是不是很酷？其實實現起來也不難。你可以使用JavaScript來動態改變backdrop-filter的blur()函數的數值。例如，根據鼠標滾動的位置來改變模糊程度。
window.addEventListener('scroll', function() { let scrollPosition = window.pageYOffset; let blurValue = scrollPosition / 10; // 根據滾動位置計算模糊值 document.querySelector('.blurred-background::before').style.backdropFilter = `blur(${blurValue}px)`; document.querySelector('.blurred-background::before').style.filter = `blur(${blurValue}px)`; // 兼容性寫法 });
這段代碼監聽了頁面的滾動事件，然后根據滾動的位置計算出一個模糊值，并將其應用到backdrop-filter和filter屬性上。這樣，當你滾動頁面時，背景的模糊程度就會動態變化。當然，這只是一個簡單的例子，你可以根據自己的需求進行更復雜的計算和控制。要注意性能問題，頻繁更新樣式可能會影響頁面流暢度。可以考慮使用requestAnimationFrame來優化性能。
backdrop-filter的兼容性怎么樣？
backdrop-filter的兼容性，說實話，有點讓人頭疼。雖然現代瀏覽器（chrome, firefox, safari, edge）都已經支持了，但是老版本的瀏覽器，或者是一些移動端的瀏覽器，可能還是不支持。所以，在使用backdrop-filter的時候，一定要考慮到兼容性問題。
一個比較好的做法是，先使用@supports特性查詢來判斷瀏覽器是否支持backdrop-filter，如果支持，就應用backdrop-filter，如果不支持，就使用其他的方案，例如簡單的背景色，或者使用filter: blur()來模擬模糊效果。
.blurred-background::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("你的背景圖片.jpg"); background-size: cover; background-position: center; /* 默認情況下，使用簡單的背景色 */ background-color: rgba(255, 255, 255, 0.5); } @supports (backdrop-filter: blur(10px)) { .blurred-background::before { background-color: rgba(255, 255, 255, 0.1); /* 增加一層半透明的背景色，讓模糊效果更明顯 */ backdrop-filter: blur(5px); /* 核心屬性 */ } }
這樣，就可以在支持backdrop-filter的瀏覽器上獲得最佳的模糊效果，而在不支持的瀏覽器上，也能提供一個基本的視覺效果。
以上就是<a
