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)文章：

CSS3制作導(dǎo)航條和毛玻璃效果06-08

PS打造深秋照片效果教程08-08

拓展訓(xùn)練如何實(shí)現(xiàn)效果最大化01-24

企業(yè)培訓(xùn)效果最大化如何實(shí)現(xiàn)06-30

有關(guān)javascript實(shí)現(xiàn)的多個(gè)層切換效果通用函數(shù)示例10-07

關(guān)于jquery簡(jiǎn)單圖片切換顯示效果實(shí)現(xiàn)方法介紹10-01

詳解CSS3盒模型display:box08-04

網(wǎng)頁(yè)中HTML5與CSS3的應(yīng)用07-21

淺析CSS3的新功能和新特性09-13

sql語(yǔ)句的各種模糊查詢08-25