使用SVG和background-size的IE10模糊：cover;

我正在开发一个页面，允许用户在div上显示自定义背景图像，然后通过CSS模糊。使用SVG和background-size的IE10模糊：cover;

但是在IE10 + CSS模糊不可用。

我现在的CSS跨浏览器和移动工作除了IE10 +是：

#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对象，然后，可以支持模糊和将定位这为后面的内容原则所以它是一个伪背景。我从另一篇文章observered的方法如下：

<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 +，所以非常令人沮丧。

由于

来源

2017-03-14 user3779703

另外，由于Microsoft不再支持IE10，因此您不需要再支持IE10：https://www.microsoft.com/en-gb/windowsforbusiness/end-of-ie-support。 –

但IE11的原理是一样的 - 它们不像旧IE那样承认Blur能力或模糊过滤器。 SVG会但我不能在svg中的背景封面图像上获得相同的效果。感谢您的输入 – user3779703

一种可能性可以是动态地改变0和width性质使用JS库如jQuery。像这样的东西应该工作：

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库，它提供了在浏览器内SVG元素的直接操纵一个JavaScript API，实时（链接：d3js.org）。

来源

2017-03-14 16:00:19 Ross

感谢您的一些指导，我会研究它并回复你。 – user3779703

使用SVG和background-size的IE10模糊：cover;

回答

相关问题