序
某日涎显，逛一個技術(shù)網(wǎng)站拙毫，被它的彈窗吸引，它所實現(xiàn)的效果類似于iOS系統(tǒng)里面的系統(tǒng)彈窗棺禾，但是我覺得這不夠美缀蹄，不夠純凈。
??上面的圖片雖然有毛玻璃效果膘婶，但是總覺得不那么完美缺前，我想要的是純凈的毛玻璃，沒有雜色的悬襟。
無關(guān)設(shè)計美感衅码，只是自己更希望實現(xiàn)第二種的純粹效果。
應(yīng)用場景
其實脊岳，毛玻璃背景多是為了突出顯示部分逝段，提升系統(tǒng)美感。比較常用的應(yīng)用場景是諸如彈框或者引用等部分割捅。
常見實現(xiàn)
最常見幾種實現(xiàn)無非以下幾種
- rgba()作為背景顏色
- 透明png圖片用圖像處理工具做出高斯模糊效果奶躯，作為元素背景
- CSS的濾鏡blur()
第一種方式最為簡單，實現(xiàn)出來的效果如下亿驾，沒有模糊不怎么好嘹黔。
第二種方式對開發(fā)人員來說，為了兼顧兼容性和美感莫瞬，是比較好的方式儡蔓，實現(xiàn)的效果也和預(yù)期最佳沒有區(qū)別，但是會額外增加一個網(wǎng)絡(luò)請求疼邀，可以截取一個1x1像素小塊喂江，然后用background-repeat實現(xiàn)。
第三種方式我們先看看實現(xiàn)方式再辯優(yōu)劣旁振。
基于CSS filter: blur()的實現(xiàn)
首先我們構(gòu)建基本結(jié)構(gòu)获询，我構(gòu)建的結(jié)構(gòu)如下：
<div class="img-wrapper">
<div class="inner">
<p>1.給web應(yīng)用添加struts2和Spring支持
2.在web.xml文件中添加Spring上下文，用以將Struts Action處理器交至Spring托管
Web.xml配置如下</p>
</div>
</div>
.img-wrapper是最外層元素规求，我們要實現(xiàn)的毛玻璃彈窗顯示位置位于該元素之上筐付。.inner是彈窗的包裹元素卵惦，p是彈窗內(nèi)容阻肿，首先我們布局好底層背景以及透明彈窗，樣式如下：
body {
margin: 0;
}
.img-wrapper {
margin: 0 auto;
width: 600px;
height: 800px;
background: url('./img/test.jpg') no-repeat;
color: white;
padding: 1px;
background-size: 600px auto;
}
.inner {
position: relative;
padding: 50px;
margin: 200px auto;
width: 300px;
height: 100px;
box-shadow: -2px 4px 20px 2px black;
}
現(xiàn)在嘗試給彈框添加濾鏡：
.inner {
***
filter: blur(5px);
}
??完全不是我們想要的效果沮尿，
.inner內(nèi)部的所有內(nèi)容都被模糊了丛塌，因此濾鏡不能作用在.inner的內(nèi)容部分较解，很容易想到運用偽元素添加一個蒙層，樣式如下：
.inner::before {
content: '';
position: absolute;
margin: -40px;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('./img/test.jpg') no-repeat;
background-size: 600px auto;
background-position: -60px -160px;
filter: blur(5px);
}
偽元素作為蒙層擋住了內(nèi)容赴邻，需要用`z-inde來調(diào)整疊放層次：
.inner {
***
z-index: 0;
}
.inner::before {
***
z-index: -1;
}
這樣調(diào)整后就可以實現(xiàn)預(yù)期的效果
幾點注意
-
blur在作用區(qū)域邊緣有消散現(xiàn)象印衔，因此需要將偽元素的寬高都設(shè)置大一些（負margin值），一般20px到30px即可姥敛，然后將偽元素父元素的overflow設(shè)置為hidden奸焙；
偽元素作為蒙層，其背景圖的大小和位置要與背景元素保持一致彤敛，因此需要將偽元素本身的background-position調(diào)整与帆，用負值調(diào)整其背景圖位置；
由于背景圖片的位置限制墨榄，一般的彈出框
.inner相對image-wrapper的位置應(yīng)是固定的玄糟，對于不固定位置的彈出框或顯示層，應(yīng)該同時調(diào)整.inner的位置袄秩，比如阵翎，彈出框水平右移200px，那么其背景應(yīng)該水平向左移動200px之剧，比較麻煩郭卫；
總結(jié)
最理想的效果如果是最麻煩的，要么是實現(xiàn)方式有問題背稼，要么是技術(shù)有待升級箱沦。
-- Kai Zou
??的確，我們現(xiàn)在看來雇庙，最好的效果谓形，可能實現(xiàn)起來比較麻煩，但是疆前，從這個過程中我們知道了一些解決問題的有趣的思路寒跳。技術(shù)有限，如有疏漏之處竹椒，敬請批評指正童太。本節(jié)是我讀LEA VEROU姐的《CSS secrets》后根據(jù)自己的理解所作。
FLAG
??用MARKDOWN作文還是有點不習(xí)慣胸完，但是確實很好用书释。另外，知識必須要花費大量的時間才能為己所用赊窥。
