CSS滤镜多个URL - 增益模糊，灰度，同时

这是为CSS模糊滤镜工作代码：CSS滤镜多个URL - 增益模糊，灰度，同时

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中工作。

来源

2012-12-18 why.you.and.i

此代码工作在野生动物园+镀铬：HTTP：// jsbin.com/okemik/1 –

谢谢。无论如何，使其在Firefox的工作呢？ –

到目前为止，Firefox（壁虎）仅支持.svg格式。 -moz-filter仍然不受支持。请参阅：https：//developer.mozilla.org/en-US/docs/CSS/filter –

请看这里工作示例：

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>

来源

2012-12-18 11:37:10

太棒了，非常感谢你！:) –

CSS滤镜多个URL - 增益模糊，灰度，同时

回答

相关问题