最近朋友圈裡的紅包照片引發一次不小的“霧霾”，它是怎麼實現的呢?下面本站小編為大家介紹!
廢話就不多說了，直接上程式碼看看怎樣實現“紅包照片”的模糊效果吧：
模糊效果實現方法：
想讓圖片有模糊的效果，我們會想到 CSS3 裡的濾鏡屬性 filter。該屬效能像 photoshop 一樣處理得到很多的效果，常常用於處理圖片，DOM 元素和 video 等也能使用，而且已被大多數現代瀏覽器支援。
filter 有許多值，這裡先介紹要讓圖片模糊必不可少的一個值 blur()，這是設定高斯模糊，也就是將一個畫素點重設為周圍畫素點的平均值;引數值越大，即周圍的範圍越大，也就越模糊;引數可設定為畫素單位，不接受百分比值;
如 filter: blur(5px)
選一張圖片，設定其 filter 屬性，對比圖如下：
這樣就大致實現了毛玻璃的.模糊效果，這個大致就說明還是和理想有一點點差距，仔細看看效果會發現有幾個問題：
超出圖片也被模糊了，尤其是背景色和圖片顏色反差很大更容易發現這個模糊化的邊緣;
圖片邊緣內部，很窄的部分是接近透明的，會漏出背景的顏色;
消除模糊邊緣
問題一可以通過以下兩個方法解決：
在圖片外部加一層容器，容器的寬高與圖片一致，設定容器樣式為 overflow: hidden; 即可去除邊緣模糊;
也可以直接在圖片元素上使用 clip: rect(top, right, bottom, right); 剪裁出一個矩形，需要注意剪裁的元素必須為絕對定位的元素，即需要同時設定 position: absolute;
消除透明邊緣
問題二的產生是由於高斯模糊演算法，使得圖片邊緣接近透明，也可理解為圖片被剪了一圈。blur() 引數的值越大，越明顯，也因此會漏出背景顏色。
解決方式如下：
圖片外部新增一層容器，寬高和圖片一致，同時設定相同的圖片作為容器的背景圖，這樣漏出來的就是容器裡的背景圖。
例項程式碼：
// HTML 結構
// CSS 樣式(展示重點部分)ainer {
width: 300px;
height: 300px;
background-image: none;
background-repeat: no-repeat;
overflow: hidden;
}
{
width: 300px;
height: 300px;
background: inherit; /*繼承父級元素樣式*/
-webkit-filter: blur(10px);
filter: blur(10px);
}
這樣透明邊漏出部分也是圖片內容，雖然沒有模糊效果，但效果更好了。如果你追求完美，還可以將模糊層擴大幾個畫素，超出容器，控制位置即可。
修改之前的程式碼：
// 相同部分程式碼已省略(即省略號部分)ainer {
position: relative;
...
}
{
width: 320px;
heighth: 320px;
position: absolute;
top: -10px;
left: -10px;
...
}
只是完成了圖片的模糊，對比 ios7 上的毛玻璃效果可能不是完全一樣，感覺缺少一點質感，這裡再提出 filter 屬性的兩個值：
brightness() - 設定元素亮度，值越大越亮，為百分比引數;
contrast() - 設定元素對比度，值越大對比越明顯，為百分比引數;
這裡列出一個通過除錯、對比，很像毛玻璃效果的引數值：
filter: blur(8px) brightness(1.4) contrast(0.4);