CSS秘密花園： 通過模糊來De-emphasize（去強調）
《 CSS Secrets 》是 @Lea Verou 最新著作，這本書講解了有關于CSS中一些小秘密。是一本CSSer值得一讀的一本書，經過一段時間的閱讀，我、@南北和@彥子一起將在W3cplus發布一系列相關的讀后感，與大家一起分享。
在上一節的“通過調節亮度去強調”中 ，我們看到了通過調節亮度來讓Web APP上的一些部分de-emphasize的方法，使用了一個半透明的黑色覆蓋層。但是，當頁面上有很多東西的時候，我們需要調暗很多，才可以為其上的文本提供足夠的對比度，或是把用戶的注意力轉移到突出顯示的盒子上或其它元素上邊。還有一種更優雅的方式，如下圖所示，是除了調光之外（或者直接不要調光）還把其它的所有東西都模糊。這看起來更真實，因為它模仿了我們看對象的視覺創建了一個深度，也就是當我們專心看物理上離我們近的東西時的視線。
游戲網站 polygon.com 提供了一個非常棒的示例，通過模糊對話框后面的所有東西，把用戶的注意力集中到對話框上。
但是，這個效果要實現的話卻不是那么容易。在 濾鏡效果 出現之前，這幾乎是不可能實現的，即使是有 blur() 濾鏡，要實現起來也很困難。我們要怎么應用模糊濾鏡呢，如果我們想要把它應用到除了某個元素之外的所有東西上呢？如果我們把它應用給 <body> 元素，頁面上的所有東西都會被模糊，包括我們希望吸引用戶注意力的元素。這和我們在第四章第四節中碰到的問題非常相似，但在這里我們不能應用相同的解決方案，因為所有東西都在我們的對話框后邊，而不僅僅是一個背景圖片。我們怎么做呢？
解決方案
我們需要額外的HTML元素來完成這個效果：我們需要把我們頁面上的所有東西包裹在一個元素中，除了那個我們不想要讓它變模糊的元素，這樣我們才可以對它應用模糊。 <main> 元素非常適合，因為：它不僅可以包裹頁面的主要內容（對話框通常不是主要內容），還可以讓我們同我們想要的樣式掛鉤。HTML標簽如下：
<main>Bacon Ipsum dolor sit amet…</main>
<dialog>
O HAI, I’m a dialog. Click on me to dismiss.
</dialog>
<!-- any other dialogs go here too -->
我們假設所有的 <dialog> 元素都是初始情況下隱藏的，任何時候都是最多只有一個可見。
你可以在上圖中看到它的最終效果。然后，在我們每次想要讓對話框出現，并給它們應用模糊濾鏡的時候，我們需要給 <main> 元素應用一個類，如下：
main.de-emphasized {
filter: blur(5px);
}
如下圖所示，這已經是一個很大的進步了。
但是，現在模糊應用得非常快，看起來有些不自然，感覺是比較尷尬的用戶體驗。因為CSS濾鏡可以應用動畫效果，我們可以在模糊頁面時應用一個平滑的過渡：
main {
transition: .6s filter;
}
main.de-emphasized {
filter: blur(5px);
}
把這兩種de-emphasizing效果（調光和模糊）結合起來使用是一個不錯的主意。一種方法是使用 brightness() 和/或 contrast() 濾鏡：
main.de-emphasized {
filter: blur(3px) contrast(.8) brightness(.8);
}
你可以在下圖看到結果。
通過CSS濾鏡調光意味著，如果它們不被支持的話，沒有降級。所以通過其它方法來實現調光效果可能會更好，也可以把它作為一個降級（如，我們在上一節中看到的 box-shadow 方法）。這還可以幫我們解決光圈效應的問題，如上圖的邊緣。在下圖中我們使用了一個陰影用于調光，這個問題就解決了。
來自： http://www.w3cplus.com/css3/css-secrets/de-emphasize-by-blurring.html