如何在 CSS 中模糊背景圖片而不影響前景內容？

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

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

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

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

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

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

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

以上是如何在 CSS 中模糊背景圖片而不影響前景內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！