Question

这是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中运行良好。

Answer 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>

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

1 个答案: