CSS中filter屬性blur和opacity的視覺效果對比

在css中，Filter: blur()和opacity的作用機制和效果不同。1. blur()通過高斯模糊軟化元素邊緣，數值越大模糊程度越高，適用于背景虛化、毛玻璃風格界面，但會影響布局性能；2. opacity通過調整透明度使元素整體變淡，取值0到1，適用于懸停漸隱、禁用狀態反饋，不影響布局且性能影響小；3. 兩者可疊加使用，blur()適合視覺裝飾，opacity更適合交互反饋，結合backdrop-filter與rgba可實現復雜效果。

在css中，filter: blur() 和 opacity 是兩種常見的視覺效果屬性，它們都能改變元素的外觀，但作用機制和最終呈現的效果差別挺大的。

1. blur()：模糊處理，影響的是清晰度

filter: blur() 主要用于給元素添加高斯模糊效果。數值越大，模糊程度越高。比如：

.blur-example {   filter: blur(5px); }

• 它會“軟化”邊緣，讓圖像或文字看起來像是隔著一層毛玻璃。
• 常用于背景虛化、卡片組件的模糊層等。
• 注意：模糊會影響布局性能，尤其是大范圍使用時。

適用場景舉例：

立即學習“前端免費學習筆記（深入）”；

• 模態框背景虛化（結合 backdrop-filter）
• 創建毛玻璃（glassmorphism）風格界面

2. opacity：透明度控制，影響的是可見度

opacity 控制元素整體的透明度，取值從0到1，0是完全透明，1是完全不透明：

.transparent-example {   opacity: 0.5; }

• 它不會改變形狀或邊緣，只是讓顏色“變淡”，甚至能看到背后的內容。
• 透明度會影響子元素，如果父元素設置了 opacity，所有子元素也會繼承這個透明度。

常見用途包括：

• 圖片或按鈕懸停時的漸隱效果
• 禁用狀態下的視覺反饋（比如灰色半透明遮罩）

3. 視覺效果對比與使用建議

雖然兩者都改變了視覺呈現，但它們的作用方式完全不同：

一些實際應用小技巧：

• 如果想實現“背景模糊 + 半透明”的效果，可以考慮結合 backdrop-filter: blur(10px) 和 background-color: rgba(255,255,255,0.5)。
• 使用 blur() 時注意不要過度，否則可能造成頁面卡頓。
• opacity 更適合做交互反饋，比如 hover 或 loading 狀態。

基本上就這些。兩個屬性各有用處，關鍵在于理解它們的視覺表現和適用場景。