html - IE10 模糊使用 SVG 和背景大小 : cover;

Question

我正在开发一个页面，允许用户在 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+，所以非常令人沮丧。

谢谢

Answer 1

一种可能是使用 JS 库(例如 jQuery)动态更改 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。

You could also look at using the D3.js library, which provides a JavaScript API for direct manipulation of SVG elements within the browser, in real time (link: d3js.org).