如何模糊 div 后面的所有元素（文本、形狀、按鈕 - 不僅僅是背景圖像）。 CSS 僅在可能的情況下

Question

當您滾動時，我試圖模糊導航欄后面的所有內容，而不僅僅是背景圖像。 使用backdrop-filter: blur(50px); 只是模糊背景（包括 div 使用其他背景過濾器所做的更改），但保持文本不變。

我試過使用backdrop-filter: blur(50px); 如上所述， filter: blur(50px); 這只是模糊了內容，並查看了十幾個類似的帖子和網站。 他們要么只是告訴我如何模糊背景，要么早於backdrop-filter 。

這是我所擁有的： https://jsfiddle.net/o3fks7dn/2/

編輯：看來我的position: fixed; 也不起作用，互聯網上也沒有任何幫助，但這不是這篇文章的重點。

這是使用position: sticky; : https://jsfiddle.net/foqhrsgx/

Answer 1

我在外部被背景圖像模糊，然后在 css 中取出模糊（正如人們在評論中出於性能原因告訴我的那樣）。

完成此操作后，無需更改任何其他內容，現在我的模糊效果就可以在導航欄上使用了。 似乎背景模糊弄亂了一堆東西。

感謝您在評論中的幫助！

PS 以前不能用的固定定位現在能用了？？？