#讀書筆記#--毛玻璃效果

某日,逛一個(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)無非以下幾種

  1. rgba()作為背景顏色
  2. 透明png圖片用圖像處理工具做出高斯模糊效果,作為元素背景
  3. 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)注意

  1. blur在作用區(qū)域邊緣有消散現(xiàn)象,因此需要將偽元素的寬高都設(shè)置大一些(負(fù)margin值),一般20px到30px即可,然后將偽元素父元素的overflow設(shè)置為hidden;


  2. 偽元素作為蒙層,其背景圖的大小和位置要與背景元素保持一致,因此需要將偽元素本身的background-position調(diào)整,用負(fù)值調(diào)整其背景圖位置;

  3. 由于背景圖片的位置限制,一般的彈出框.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í)間才能為己所用。

THE END

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,829評論 25 708
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,786評論 1 92
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,180評論 4 61
  • 1 同事小蔡與男朋友談了兩年,收到鮮花無數(shù),禮物可以堆一倉庫。但我提醒小蔡,這個(gè)男朋友不靠譜。 熱戀中的小蔡腦子里...
    沐芝陽閱讀 544評論 9 16
  • 薔薇花盛開的季節(jié)會下雨 香樟花香遍滿座城的季節(jié)飄落著雨 雨來了 走,走出去嬉戲 雨飄了 走,走出去親昵 天上掉下了...
    龍青閱讀 209評論 7 1