序
某日，逛一個(gè)技術(shù)網(wǎng)站，被它的彈窗吸引，它所實(shí)現(xiàn)的效果類似于iOS系統(tǒng)里面的系統(tǒng)彈窗，但是我覺得這不夠美，不夠純凈。
??上面的圖片雖然有毛玻璃效果，但是總覺得不那么完美，我想要的是純凈的毛玻璃，沒有雜色的。
無關(guān)設(shè)計(jì)美感，只是自己更希望實(shí)現(xiàn)第二種的純粹效果。
應(yīng)用場景
其實(shí)，毛玻璃背景多是為了突出顯示部分，提升系統(tǒng)美感。比較常用的應(yīng)用場景是諸如彈框或者引用等部分。
常見實(shí)現(xiàn)
最常見幾種實(shí)現(xiàn)無非以下幾種
- rgba()作為背景顏色
- 透明png圖片用圖像處理工具做出高斯模糊效果，作為元素背景
- CSS的濾鏡blur()
第一種方式最為簡單，實(shí)現(xiàn)出來的效果如下，沒有模糊不怎么好。
第二種方式對開發(fā)人員來說，為了兼顧兼容性和美感，是比較好的方式，實(shí)現(xiàn)的效果也和預(yù)期最佳沒有區(qū)別，但是會額外增加一個(gè)網(wǎng)絡(luò)請求，可以截取一個(gè)1x1像素小塊，然后用background-repeat實(shí)現(xiàn)。
第三種方式我們先看看實(shí)現(xiàn)方式再辯優(yōu)劣。
基于CSS filter: blur()的實(shí)現(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是最外層元素，我們要實(shí)現(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)容部分，很容易想到運(yùn)用偽元素添加一個(gè)蒙層，樣式如下：
.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)整后就可以實(shí)現(xiàn)預(yù)期的效果
幾點(diǎn)注意
-
blur在作用區(qū)域邊緣有消散現(xiàn)象，因此需要將偽元素的寬高都設(shè)置大一些（負(fù)margin值），一般20px到30px即可，然后將偽元素父元素的overflow設(shè)置為hidden；
偽元素作為蒙層，其背景圖的大小和位置要與背景元素保持一致，因此需要將偽元素本身的background-position調(diào)整，用負(fù)值調(diào)整其背景圖位置；
由于背景圖片的位置限制，一般的彈出框
.inner相對image-wrapper的位置應(yīng)是固定的，對于不固定位置的彈出框或顯示層，應(yīng)該同時(shí)調(diào)整.inner的位置，比如，彈出框水平右移200px，那么其背景應(yīng)該水平向左移動200px，比較麻煩；
總結(jié)
最理想的效果如果是最麻煩的，要么是實(shí)現(xiàn)方式有問題，要么是技術(shù)有待升級。
-- Kai Zou
??的確，我們現(xiàn)在看來，最好的效果，可能實(shí)現(xiàn)起來比較麻煩，但是，從這個(gè)過程中我們知道了一些解決問題的有趣的思路。技術(shù)有限，如有疏漏之處，敬請批評指正。本節(jié)是我讀LEA VEROU姐的《CSS secrets》后根據(jù)自己的理解所作。
FLAG
??用MARKDOWN作文還是有點(diǎn)不習(xí)慣，但是確實(shí)很好用。另外，知識必須要花費(fèi)大量的時(shí)間才能為己所用。
