http://www.cnblogs.com/fsjohnhuang/p/4127888.html#a3

?

?高斯模糊讓我想起忘了戴眼鏡上街的情景*~*!

? ?

? 1. CSS3濾鏡的實(shí)現(xiàn)

<style type="text/css">.blur{/** 格式，filer: blur(模糊半徑) * 模糊半徑，取值范圍0~Npx，0為無(wú)效果 */ -webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); -ms-filter: blur(1px); filter: blur(1px); } </style> <div class="blur" style="background:url(./mm.jpg)"></div>

? ? ?

? 2. IE5.5~9的實(shí)現(xiàn)

? ? ? ?使用IE濾鏡：? filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); ?,該方式在IE11中文檔模式為5.5~9均起作用。

??

? 3. FF和IE10+的實(shí)現(xiàn)?

?　　使用SVG effect for HTML的方式：

　　?? ? ? blur.svg:

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" baseProfile="full"> <defs> <filter id="blur"> <feGaussianBlur stdDeviation="10" /> </filter> </defs>
<image xlink:href="./mm.jpg" x="0" y="0" height="200" width="200" filter="url(#blur)"/> </svg>

? ? ? ? ? ? index.html(FF下)：

<style type="text/css"> .blur{filter: url(blur.svg#blur); } </style> <div class="blur" style="background:url(./mm.jpg)"></div>

? ? ? ? ? ?index.html(IE10+下，IE10+不支持直接在樣式表對(duì)元素應(yīng)用SVG濾鏡)：

<style type="text/css"> .blur{background-iamge: url(blur.svg); } </style> <div class="blur"></div>

?

? ??使用Canvas作處理，高斯模糊的算法請(qǐng)參考：阮老師的“高斯模糊的算法”參考譯文，處理庫(kù)StackBlur.js。

? ? 處理庫(kù)API：?stackBlurImage( sourceImageID, targetCanvasID, radius, blurAlphaChannel );?

• sourceImageID表示要模糊的圖片的id, 默認(rèn)這個(gè)圖片要隱藏；
• targetCanvasID表示要顯示模糊圖片的canvas元素的id;
• radius表示模糊的半徑大小。不過(guò)，根據(jù)我的對(duì)比測(cè)試，radius好像與CSS中filter濾鏡的模糊值不是1:1匹配的，反倒是有些類(lèi)似2:1. 也就是這里的20px的半徑模糊近似于CSS中blur濾鏡值設(shè)置為10px;
• blurAlphaChannel為布爾屬性，表示aplha透明通道是否要模糊，true表示要模糊。

轉(zhuǎn)載于:https://www.cnblogs.com/zhp404/articles/4168262.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的高斯滤镜模糊CSS3的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。