序
某日,逛一個(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í)間才能為己所用。