css图像过滤器 - 浏览器兼容性

我正在寻找一个平滑的解决方案来实现过滤器（模糊+不透明度）的图像 - 工作在最流行的浏览器（不幸的是，IE计数以及！），我的代码是'牛逼正常工作：css图像过滤器 - 浏览器兼容性

-webkit-filter: blur(3px) opacity(40%); 
-moz-filter: blur(3px) opacity(40%); 
-o-filter: blur(3px) opacity(40%); 
-ms-filter: blur(3px) opacity(40%); 
filter: blur(3px) opacity(40%);

http://caniuse.com/#feat=css-filters

我需要SVG标记替代，太多的调整：

<svg> 
    <image ... /> 
    <filter id="test"> 
    <feGaussianBlur stdDeviation="3"/> 
    <feComponentTransfer> 
     <feFuncA type="table" tableValues="0 0.8"/> 
    </feComponentTransfer> 
    </filter> 
</svg> 

.tile:hover image{ filter:url(#test); }

必须有比这更简单的解决办法，我调整标记与svg一起工作太多了。

我建立可以看作here

在此先感谢您的帮助或暗示的画廊演示！

来源

2016-06-07 fabio_p

IE只支持SVG过滤器，仅支持SVG内容。没有其他的选择，除非你的画廊由静态光栅图像组成，在这种情况下，你可以将它们模糊成像photoshop这样的东西。 –

CSS过滤器是175个字符。 SVG标记是195个字符。如果你想要IE支持，你必须使用SVG。它没有那么坏。

来源

2016-06-07 15:38:35

css图像过滤器 - 浏览器兼容性

回答

相关问题