用 CSS 模糊背景：避免內容模糊

模糊背景可以增強網站美感並將注意力集中在關鍵內容上。但是，如果模糊無意中影響了內容本身怎麼辦？

在此範例中，嘗試模糊背景圖像，同時保留 span 元素內前景文字的清晰度。為了實現這一點，可以策略性地使用CSS。

關鍵技術是利用:before偽類別來繼承背景影像。引入了類別為「blur-bgimage」的新 div 元素，並新增了 :before 偽類別。這個偽元素使用background:inherit屬性繼承背景圖像。

接下來，:before偽元素使用CSS過濾器被有效地模糊。透過合併這些濾鏡（在本例中為模糊（10px）），背景影像將獲得所需的模糊效果。

然後為“.blur-bgimage”div分配overflow：hidden以隱藏超出的模糊區域div 的邊界。邊距、文字對齊和 z 索引也已適當設定。

要切換模糊效果，可以使用 JavaScript 新增或刪除「.blur-bgimage」類，如提供的 jsfiddle 範例所示。使用這種方法，可以在不影響內容清晰度的情況下動態控制背景模糊效果。