我正在尝试寻找 Firefox 的替代品:filter: blur(3px);，它只在 Firefox 34 上受支持。研究让我找到了 SVG 过滤器。
我可以通过这行 CSS 对 SVG 应用灰度效果:
filter: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/></svg>"); /* Firefox 10+, Firefox on Android */
不幸的是，当我为模糊尝试类似的东西时，没有任何反应，改变过滤器功能，但坚持相同的语法。
filter: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><feGaussianBlur stdDeviation="10"/></svg>")
你能帮我解决一下吗？
我看过几个修改 html 文件的例子。然而，考虑到 Firefox 34 将在几个月后可用(因此我宁愿保持它干净和简单)，这对我来说是不可取的。
最佳答案
您需要使用 id/anchor 将 datauri 指向过滤器本身。
filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' ><filter id='blur10'><feGaussianBlur stdDeviation='10' /></filter></svg>#blur10");
这是一篇解释这个的文章(比我糟糕的英语更好):http://benfrain.com/applying-multiple-svg-filter-effects-defined-in-css-or-html/
关于html - Firefox 的模糊效果滤镜，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25687486/