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

?

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

? ?

? 1. CSS3濾鏡的實現

<style type="text/css">.blur{/** 格式，filer: blur(模糊半徑) * 模糊半徑，取值范圍0~Npx，0為無效果 */ -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的實現

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

??

? 3. FF和IE10+的實現?

?　　使用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+不支持直接在樣式表對元素應用SVG濾鏡)：

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

?

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

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

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

轉載于:https://www.cnblogs.com/zhp404/articles/4168262.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。