我一直在寻找一种解决方案,为 IE10+ 的背景赋予模糊效果。
我找到了 StackBlur 并让它工作,但在我的情况下它很慢,因为我有一个很大的背景并且希望它尽可能快地呈现。
您知道有一个用于模糊效果的 svg 过滤器,当您拥有像这样的 svg 内容时,它可以正常工作
<svg width='331' height='500' id='svgroot'><defs><filter id='blur'><feGaussianBlur stdDeviation='4' data-filterId='1'/></filter></defs><image filter='url(#blur)' xlink:href='http://dpc1.ftcdn.net/jpg/00/65/54/88/500_F_65548876_vDfTzTY0Bq7xVdbJH92kLpPy37FDVF5G.jpg' height='100%' width='100%'/></svg>
我想要做的是,把这个 svg 图像用作背景图像。它必须是css背景。我在搜索解决方案时发现了这个小提琴http://jsfiddle.net/vPA9z/3/ 所以我认为这是可能的,但为什么这不起作用http://jsfiddle.net/N2n27/2/
var mySVG2 ="<svg width='331' height='500' id='svgroot'><defs><filter id='blur'><feGaussianBlur stdDeviation='4' data-filterId='1'/></filter></defs><image filter='url(#blur)' xlink:href='http://dpc1.ftcdn.net/jpg/00/65/54/88/500_F_65548876_vDfTzTY0Bq7xVdbJH92kLpPy37FDVF5G.jpg' height='100%' width='100%'/></svg>";
var mySVG64 = window.btoa(mySVG2);
$('body').css({
"background-image": "url('data:image/svg+xml;base64,"+mySVG64+"')"
});
我试图转换 Base64 但仍然没有运气。