今天在做一個登錄界面的時候，由于視覺給的頁面背景圖片太鮮艷亮眼，導致頁面中間的登錄表單框很不顯眼，效果很差。就想到了做成毛玻璃的效果，現在分享出來，大家一起看看吧。
頁面結構如下：
<p class="wrap-box"> <!--最外層包裹框，背景圖片很鮮艷亮眼position:fixed--> <p class='login-box'> <!--登錄表單框部分position:fixed--> </p> </p>
由于之前用過CSS filter屬性，在屬性值中使用blur(<blur_size>)函數可以起到毛玻璃效果，所以我有2個思路來實現突出登錄表單框的效果：
對wrap-box使用filter:blur(<blur_size>);，然后將login-box的z-index設置為比父元素大使之浮在上層，使頁面中除了登錄表單框部分都是模糊的。
Exciting!這種方法似乎可行，但是效果卻不是所期望的，login-box也被模糊了！原因如下：
應用了filter:blur(<blur_size>);的元素的所有子孫元素都會被模糊處理（不是因為繼承），即使子孫元素脫離了該元素的文檔流也不能避免。
只對login-box背后部分模糊處理。解決方案是在login-box下層加一個與之重疊的元素，對此元素應用filter:blur(<blur_size>);，可以選擇用偽元素：
.login-box::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
filter:blur(10px) contrast(.8);
z-index:-1;
}并設置如下背景樣式：
.wrap-box ,.login-box::before{
background:url('/assets/login_bg.jpg') 0 / cover fixed;
}效果達成如下：
