css實現(xiàn)照片模糊效果類似毛玻璃效果
發(fā)布時間：2014-04-08 11:56:05 作者：佚名 
我要評論
我要評論這篇文章主要介紹了css實現(xiàn)照片模糊效果類似毛玻璃效果,需要的朋友可以參考下
復(fù)制代碼
代碼如下:<img class="blur" src="test.jpg" />
css中：
復(fù)制代碼
代碼如下:.blur {
filter: url(blur.svg#blur);
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
}
針對css第一行需要引入文件 blur.svg
blur.svg 的內(nèi)容如下
復(fù)制代碼
代碼如下:<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="3" />
</filter>
</svg>
相關(guān)文章
jQuery+CSS3實現(xiàn)帶毛玻璃效果的模糊背景遮擋特效源碼
這是一款基于jQuery+CSS3實現(xiàn)帶毛玻璃效果的模糊背景遮擋特效源碼。帶有森林背景的少女半身照前面有一個矩形的毛玻璃狀模糊區(qū)域，通過鼠標(biāo)拖動該模糊區(qū)域可觀察到對應(yīng)位置2018-05-11
Win10 NEON模糊毛玻璃特效怎么關(guān)閉？Win10 NEON模糊毛玻璃特效很多人不喜歡，想要關(guān)閉，今天我們就來分享一個快速關(guān)閉的技巧，需要的朋友可以參考下2017-05-07使用CSS3濾鏡的filter:blur屬性制作毛玻璃模糊效果的方法
CSS3的blur屬性可以將圖片加上模糊濾鏡的效果,下面我們就來詳細看一下使用CSS3濾鏡的filter:blur屬性制作毛玻璃模糊效果的方法,需要的朋友可以參考下2016-07-08
jQuery實現(xiàn)花瓣網(wǎng)毛玻璃模糊背景特效源碼
jQuery實現(xiàn)花瓣網(wǎng)毛玻璃模糊背景特效源碼是一款個性的毛玻璃模糊特效下載。本段代碼適應(yīng)于所有網(wǎng)頁使用，有需要的朋友可以直接下載使用2016-07-06
html5 svg實現(xiàn)的仿花瓣網(wǎng)毛玻璃模糊背景效果源碼
這是一款基于html5 svg實現(xiàn)的仿花瓣網(wǎng)毛玻璃模糊背景效果源碼。背景是圖片的模糊顯示效果，畫面中心則是圖片的圓形縮略顯示圖2016-07-04
毛玻璃特效其實是對圖片的模糊處理，我們經(jīng)常會在手機app中上拉應(yīng)用時出現(xiàn)背景圖片模糊特效，這就是毛玻璃特效。今天給大家分享源碼，需要的朋友前來下載2019-12-12
