毛玻璃效果
ios里毛玻璃效果的使用非常多，本文介紹一個實現div毛玻璃背景的方法
css3 Filter
css3的Filter主要用在圖像的特效處理上，默認值為none，還有以下備選項：
1.grayscale灰度
2.sepia褐色
3.saturate飽和度
4.hue-rotate色相旋轉
5.invert反色
6.opacity透明度
7.brightness亮度
8.contrast對比度
9.blur模糊
10.drop-shadow陰影
每一種效果大家可以自己試試，考慮一下可以用在哪些方面，這里僅僅用到了其中的blur，幫助實現高斯模糊的效果。兼容性我試了一下最新的火狐和Chrome效果都是可以的，IE不用說了…
filter:blur()
參數默認是0，單位px，不接受%，參數值的大小表示屏幕上以多少像素融在一起， 所以值越大越模糊。
：before()
:before是css中的一種偽元素，可用於在某個元素之前插入某些內容。
用它來添加模糊背景，具體用法可以看我另外一篇?:before和:after
rgba()
毛玻璃背景上文字內容顯示效果並不理想，無論字體顏色深或淺，看着總是怪怪的…因此還需要加上一層帶色的半透明背景，一般是黑色，或白色。
https://www.houdianzi.com/ vi設計公司
示例：
整體通過三層重疊實現：
最下面是模糊層.blur_box:before，設置z-index: -2。
中間是rgba層.rgba，設置z-index: -1。
最上面是內容層.blur_box，設置z-index: 0。
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>毛玻璃效果</title> </head> <style> *{ margin: 0; padding: 0; } .bg{ background:url(1.jpg) no-repeat center center fixed;/* 與下面的blur_box:before中的background設置一樣 */ width:100%; height:100%; } .blur_box{ z-index: 0;/* 為不影響內容顯示必須為最高層 */ position: relative; overflow: hidden; } .blur_box:before{ content: "";/* 必須包括 */ position: absolute;/* 固定模糊層位置 */ width:300%; height:300%; left: -100%;/* 回調模糊層位置 */ top: -100%;/* 回調模糊層位置 */ background:url(1.jpg) no-repeat center center fixed;/* 與上面的bg中的background設置一樣 */ filter: blur(20px);/* 值越大越模糊 */ z-index: -2;/* 模糊層在最下面 */ } .rgba{ background-color: rgba(0, 0, 0, 0.2);/* 為文字更好顯示，將背景顏色加深 */ position: absolute;/* 固定半透明色層位置 */ width:100%; height:100%; z-index: -1;/* 中間是rgba半透明色層 */ } .content_text{ text-align: center; color: rgba(255, 255, 255, 0.8); padding: 50px 30px; line-height: 28px; } article{ width:40%; height:300px; margin:120px auto; } </style> <body <div class="bg"> <article class="blur_box"> <div class="rgba"></div><!-- 寫在這其實和blur_box:before效果相同，但已經設置過blur_box:before了 --> <div class="content_text"> <h1>haha</h1> <p>texttexttexttexttexttexttexttexttext</p> <p>texttexttexttexttexttexttexttexttext</p> <p>texttexttexttexttexttexttexttexttext</p> <p>texttexttexttexttexttexttexttexttext</p> <p>texttexttexttexttexttexttexttexttext</p> <p>texttexttexttexttexttexttexttexttext</p> </div> </article> </div> </body> </html>注釋已經寫的很詳細了，但有一點還是得單獨說一下。因為blur()產生的模糊效果當值越大時，就會有越寬的邊緣漸變過渡，為了消除(實際上只是讓它看不見)，我將模糊層的寬度和高度都變大，再通過top和left負值調整位置。
.blur_box:before{ content: ""; position: absolute; width:300%;/* 模糊層的寬度和高度都變大 */ height:300%; left: -100%;/* 回調模糊層位置 */ top: -100%; background:url(1.jpg) no-repeat center center fixed; filter: blur(20px); z-index: -2; }其中.rgba也可改為白色半透明background-color: rgba(255,255,255,0.2);，完全取決於自己，然后相應改變內容的字色。blur()的參數也可以根據自己愛好試着改變出想要的效果。