- 相關推薦
CSS3實現“紅包照片”模糊效果
最近朋友圈里的紅包照片引發一次不小的“霧霾”，它是怎么實現的呢?下面YJBYS小編為大家介紹!
廢話就不多說了，直接上代碼看看怎樣實現“紅包照片”的模糊效果吧：
模糊效果實現方法：
想讓圖片有模糊的效果，我們會想到 CSS3 里的濾鏡屬性 filter。該屬性能像 photoshop 一樣處理得到很多的效果，常常用于處理圖片，DOM 元素和 video 等也能使用，而且已被大多數現代瀏覽器支持。
filter 有許多值，這里先介紹要讓圖片模糊必不可少的一個值 blur()，這是設置高斯模糊，也就是將一個像素點重設為周圍像素點的平均值;參數值越大，即周圍的范圍越大，也就越模糊;參數可設置為像素單位，不接受百分比值;
如 filter: blur(5px)
選一張圖片，設置其 filter 屬性，對比圖如下：
這樣就大致實現了毛玻璃的模糊效果，這個大致就說明還是和理想有一點點差距，仔細看看效果會發現有幾個問題：
超出圖片也被模糊了，尤其是背景色和圖片顏色反差很大更容易發現這個模糊化的邊緣;
圖片邊緣內部，很窄的部分是接近透明的，會漏出背景的顏色;
消除模糊邊緣
問題一可以通過以下兩個方法解決：
在圖片外部加一層容器，容器的寬高與圖片一致，設置容器樣式為 overflow: hidden; 即可去除邊緣模糊;
也可以直接在圖片元素上使用 clip: rect(top, right, bottom, right); 剪裁出一個矩形，需要注意剪裁的元素必須為絕對定位的元素，即需要同時設置 position: absolute;
消除透明邊緣
問題二的產生是由于高斯模糊算法，使得圖片邊緣接近透明，也可理解為圖片被剪了一圈。blur() 參數的值越大，越明顯，也因此會漏出背景顏色。
解決方式如下：
圖片外部添加一層容器，寬高和圖片一致，同時設置相同的圖片作為容器的背景圖，這樣漏出來的就是容器里的背景圖。
實例代碼：
// HTML 結構
// CSS 樣式(展示重點部分).container {
width: 300px;
height: 300px;
background-image: none;
background-repeat: no-repeat;
overflow: hidden;
}
.blur {
width: 300px;
height: 300px;
background: inherit; /*繼承父級元素樣式*/
-webkit-filter: blur(10px);
filter: blur(10px);
}
這樣透明邊漏出部分也是圖片內容，雖然沒有模糊效果，但效果更好了。如果你追求完美，還可以將模糊層擴大幾個像素，超出容器，控制位置即可。
修改之前的代碼：
// 相同部分代碼已省略(即省略號部分).container {
position: relative;
...
}
.blur {
width: 320px;
heighth: 320px;
position: absolute;
top: -10px;
left: -10px;
...
}
只是完成了圖片的模糊，對比 ios7 上的毛玻璃效果可能不是完全一樣，感覺缺少一點質感，這里再提出 filter 屬性的兩個值：
brightness() - 設置元素亮度，值越大越亮，為百分比參數;
contrast() - 設置元素對比度，值越大對比越明顯，為百分比參數;
這里列出一個通過調試、對比，很像毛玻璃效果的參數值：
filter: blur(8px) brightness(1.4) contrast(0.4);
【CSS3實現“紅包照片”模糊效果】相關文章：
CSS3制作導航條和毛玻璃效果06-08
PS打造深秋照片效果教程08-08
拓展訓練如何實現效果最大化01-24
企業培訓效果最大化如何實現06-30
有關javascript實現的多個層切換效果通用函數示例10-07
詳解CSS3盒模型display:box08-04
網頁中HTML5與CSS3的應用07-21
淺析CSS3的新功能和新特性09-13
sql語句的各種模糊查詢08-25