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