使用CSS3濾鏡的filter:blur屬性制作毛玻璃模糊效果的方法
frontopen 發(fā)布時間：2016-07-08 11:27:43 作者：品味人生 
我要評論
我要評論CSS3的blur屬性可以將圖片加上模糊濾鏡的效果,下面我們就來詳細看一下使用CSS3濾鏡的filter:blur屬性制作毛玻璃模糊效果的方法,需要的朋友可以參考下
今天在使用icloud的時候看到蘋果icloud官網(wǎng)的毛玻璃效果非常贊，仔細研究了一下它的實現(xiàn)方式，是使用js配合background-image: -webkit-canvas的形式繪制出的毛玻璃背景圖片。
不過今天又仔細研究了一下css3中的blur方法，可以實現(xiàn)同樣的效果。且配合JS可以實現(xiàn)模糊縮放的效果
基礎(chǔ)
先來看一下blur屬性的表達式：
CSS Code復(fù)制內(nèi)容到剪貼板
- filter：blur（add=add，direction，strength=strength）
我們看到blur屬性有三個參數(shù)：add、direction、strength。
Add參數(shù)有兩個參數(shù)值：true和false。意思是指定圖片是否被改變成模糊效果。
Direction參數(shù)用來設(shè)置模糊的方向。模糊效果是按照順時針方向進行的。其中0度代表垂直向上，每45度一個單位，默認(rèn)值是向左的270度。角度方向的對應(yīng)關(guān)系見下表：
實例
CSS代碼
CSS Code復(fù)制內(nèi)容到剪貼板
- .blur {
- filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
- -webkit-filter: blur(10px); /* Chrome, Opera */
- -moz-filter: blur(10px);
- -ms-filter: blur(10px);
- filter: blur(10px);
- filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
- }
HTML部分
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <img src="mm1.jpg" class="blur" />
其中blur(10px)中的大小決定了模糊后的圖片大小和模糊程度
相關(guān)文章
詳解CSS3 filter:drop-shadow濾鏡與box-shadow區(qū)別與應(yīng)用
這篇文章主要介紹了詳解CSS3 filter:drop-shadow濾鏡與box-shadow區(qū)別與應(yīng)用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友2020-08-24
通過css3的filter濾鏡改變png圖片的顏色的示例代碼
本方法是通過CSS3濾鏡 filter 中的 drop-shadow 將png圖片的非透明部分生成任意顏色的投影，然后將原始圖片隱藏起來，從而達到改變圖片顏色的目的，代碼簡單易懂，對CSS改2020-05-06
這篇文章主要介紹了CSS3 中filter（濾鏡）屬性使用，本文通過實例代碼截圖給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-04-07
jquery和CSS3圖片排序過濾搜索插件Filterizr
Filterizr是一個jquery和CSS3圖片排序過濾插件?？蓪σ唤M圖片進行排序，按條件過濾和按關(guān)鍵字搜索，歡迎下載2017-07-19
這篇文章主要介紹了詳解CSS3中強大的filter(濾鏡)屬性的相關(guān)資料,需要的朋友可以參考下2017-06-29使用Filters濾鏡彌補CSS3的跨瀏覽器問題以及兼容低版本IE
跨瀏覽器兼容性是網(wǎng)頁制作永恒的難題,所以在未來一段時間里，樣式表里的-moz-，-webkit-，(-ms-,-o-)等等前綴將長期存在,除了考慮各家瀏覽器之間的兼容性外，我們還有必要2013-01-23css3背景圖片透明疊加屬性cross-fade簡介及用法實例
據(jù)說iOS6系統(tǒng)(iPhone5)增加了兩個CSS3屬性，一個是CSS3 filters – CSS3濾鏡另外一個是CSS3 Cross-fade – CSS3交叉淡入淡出,接下來為您介紹cross-fade屬性，感興趣的朋友2013-01-08CSS3 濾鏡 webkit-filter詳細介紹及使用方法
CSS3 開始也有濾鏡（不是 IE 的那種濾鏡），這些濾鏡效果最初是用于 SVG 的，W3C 將其引入到 CSS3 中，然后制定了 CSS Filter Effects 1.0 的規(guī)范，Webkit 率先支持了它,需2012-12-27CSS3 filter(濾鏡)實現(xiàn)網(wǎng)頁灰色或者黑色模式的代碼
這篇文章主要介紹了CSS3 filter(濾鏡)實現(xiàn)網(wǎng)頁灰色或者黑色模式的代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以2020-11-30
