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');          
}

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

<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);
   });
}

虽然不可否认，这非常黑客。

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

IE10模糊使用SVG和背景大小：封面;

1 个答案: