IE10 Blur 使用 SVG 和 background-size: cover;答案

【问题标题】：IE10 Blur using SVG and background-size: cover;IE10 Blur 使用 SVG 和 background-size: cover;
【发布时间】：2017-08-05 00:11:18
【问题描述】：

我正在开发一个页面，允许用户在 div 上显示自定义背景图像，然后通过 CSS 进行模糊处理。

但是在 IE10+ 中 CSS Blur 不可用。

我目前在除 IE10+ 之外的浏览器和移动设备上工作的 CSS 是：

#menuImage {
  background: url(../UserFile/test.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  width:100%;
  height:100%;

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='5');          
}

因此，我为 IE 实例使用了 SVG 对象的原理，它可以支持模糊，并将其放置在该区域的内容后面，因此它是一个伪背景。我从另一篇文章中观察到的方法如下：

<svg class="blur-ie">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="4" />
    </filter>
  </defs>
  <image xlink:href="../UserFile/test.jpg" width="100%" height="100%" filter="url(#blur)" preserveAspectRatio="slice"></image>
</svg>

但是我的问题是我无法复制背景大小的封面效果来创建此背景壁纸。

谁能帮助我如何通过图像的 SVG 方法实现背景覆盖效果。如果这是一个向后兼容性问题，我不会打扰，但是这是 IE10+，所以非常令人沮丧。

谢谢

【问题讨论】：

顺便说一句，您应该不再需要支持 IE10，因为 Microsoft 不再支持它：microsoft.com/en-gb/windowsforbusiness/end-of-ie-support。
但是 IE 11 等的原理是一样的——它们不像旧的 IE 那样支持模糊能力或模糊过滤器。 SVG 会，但我无法对 svg 中的背景封面图像产生相同的效果。感谢您的意见

标签： html css svg internet-explorer-10

【解决方案1】：

一种可能是使用 jQuery 等 JS 库动态更改 height 和 width 属性。这样的事情应该可以工作：

HTML：

<svg class="blur-ie">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="4" />
    </filter>
  </defs>
  <image id="svgImg" xlink:href="../UserFile/test.jpg" width="100%" height="100%" filter="url(#blur)" preserveAspectRatio="slice"></image>
</svg>

jQuery：

if ($.browser.msie && $.browser.version >= 10) {
   $(window).on('resize', function(){
      var winH = $(window).height();
      var winW = $(window).width();
      $('#svgImg').attr("height", winH);
      $('#svgImg').attr("height", winW);
   });
}

虽然不可否认，这很 hacky。

您还可以考虑使用 D3.js 库，它提供了一个 JavaScript API，用于在浏览器中实时直接操作 SVG 元素（链接：d3js.org）。 p>

【讨论】：

感谢您的指导，我会调查并回复您。