Question

我遵循了许多教程和stackoverflow问题，这些问题基本上都说同样的事情，但对我来说仍然无法正常工作（不要在IE和FF / Opera for Windows和Linux中显示任何模糊效果或任何效果）< / p>

这是我的css：

-webkit-filter: blur(20px);
-moz-filter: blur(15px);
-o-filter: blur(15px);
-ms-filter: blur(15px);
filter: url(#effect-blur-1);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'effect-blur-1\'><feGaussianBlur stdDeviation=\'15\' /></filter></svg>#effect-blur-1");
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');

我已经尝试将svg放在外部文件中。也没有积极的结果。甚至用这个：

filter:blur(add = 0, direction = 300, strength = 10);

但仍然没有。

任何人都知道我哪里错了？

Answer 1

IE10 / 11不支持将过滤器应用于html内容，仅支持SVG内容，因此您的图片必须是SVG <image>元素，而不是html <img>元素。

此外，IE似乎不支持数据网址过滤器，至少我无法使其工作，所以我们留下了这个似乎适用于IE11和Firefox以及可能也适用于webkit ...

<header>
      <div>
        <div>
            <svg width="650" height="400">
            <image width="650" height="400" xlink:href="http://www.insidefacebook.com/wp-content/uploads/2013/09/iOS7update.jpg" filter="url(#blur)" />
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
    </filter>
            </svg>
        </div>
      </div>
</header>

或jsfiddle

过滤：Opera中的blur.svg和IE（Window / Linux）不起作用

1 个答案: