Question

我正在寻找一个平滑的解决方案来实现对图像的过滤（模糊+不透明） - 在最流行的浏览器上工作（遗憾的是，IE也很重要！），而且我的代码不起作用正确：

-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

提前感谢您的帮助或提示！

Answer 1

CSS过滤器为175个字符。 SVG标记为195个字符。如果您需要IE支持，则必须使用SVG。这不是那么糟糕。

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

1 个答案: