CSS 过滤多个 URL - 同时获得模糊和灰度答案

【问题标题】：CSS Filter Multiple URL - Gain Blur and Grayscale At the Same TimeCSS 过滤多个 URL - 同时获得模糊和灰度
【发布时间】：2012-12-18 19:37:10
【问题描述】：

这是 CSS 模糊过滤器的工作代码：

filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px);
-o-filter: blur(3px); -ms-filter: blur(3px);
filter: url('images/blur.svg#blur');

blur.sv 在哪里：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="3" />
</filter>
</svg>

这适用于灰度：

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */

但是我如何使它们同时进行灰度和模糊（尤其是使用 URL）？我试过了：

filter: blur(3px) grayscale(100%);
-webkit-filter: blur(3px) grayscale(100%);
-moz-filter: blur(3px) grayscale(100%);
-o-filter: blur(3px) grayscale(100%);
-ms-filter: blur(3px) grayscale(100%);
filter: url('images/blur.svg#blur'), url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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\'/></filter></svg>#grayscale");

但它只给了我没有模糊的灰度。任何帮助将不胜感激。

编辑：我想让它在最新的主流浏览器中运行，正如 Rakesh Juyal 所说，它在 Chrome 中运行良好，但在 Firefox 中运行良好。

【问题讨论】：

此代码在 safari + chrome 中运行：jsbin.com/okemik/1
谢谢。无论如何让它也可以在 Firefox 中运行？
Firefox(gecko) 目前只支持 .svg 格式。 -moz-filter 仍然不受支持。见：developer.mozilla.org/en-US/docs/CSS/filter
感谢您的回复。我们可以同时使用两个 svg 吗？我想像“过滤器：url（'images/blur.svg#blur'），url（'images/gray.svg#gray'）;”会工作，但它没有:(

标签： html css blur grayscale

【解决方案1】：

请在此处查看工作示例：

http://jsbin.com/okemik/6

我用模糊+灰度滤镜制作了一个svg元素：

<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  </filter>

  <filter id='grayscale'><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'/></filter>

  <filter id='grayscaledBlur'>
    <feGaussianBlur in="SourceGraphic" stdDeviation="3"/>

    <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'/>

    </filter>


</svg>

【讨论】：