?

CSS3 blur濾鏡實現
如下測試代碼：

.blur { -webkit-filter: blur(10px); /* Chrome, Opera */-moz-filter: blur(10px);-ms-filter: blur(10px); filter: blur(10px); }

?

相關HTML代碼如下：

<img src="mm1.jpg" /> <img src="mm1.jpg" class="blur" />

?

需要注意目前火狐不支持，其他些瀏覽器，如FireFox到目前還沒有支持CSS3 filter. 當然，要實現（比方說）FireFox 24瀏覽器上照片變模糊的效果，也是可以的。可以使用SVG的模糊濾鏡。
新建文命名為blur.svg的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> </svg>

?

如下CSS調用代碼：

filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

?

完整的css代碼

.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 */ }

?

轉載于:https://www.cnblogs.com/nifengs/p/5304999.html

總結

以上是生活随笔為你收集整理的css3毛玻璃模糊效果的全部內容，希望文章能夠幫你解決所遇到的問題。

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