我想创建一个不透明模糊叠加，类似于 Windows Aero 或 iOS7。不幸的是filter: blur() or filter: url(#svgBlur)属性只能应用于元素，不能应用于其后面的内容。
为了解决这个问题，我们需要一个模糊背景的副本。在 FX 中可以使用background: -moz-element(#elementId)实验性 CSS 属性。使用它我可以获得我想要的效果FX only http://jsfiddle.net/KeithHenry/RgBzH/1/.
有other https://stackoverflow.com/questions/17034485/ios-7s-blurred-overlay-effect-using-css 问题 https://stackoverflow.com/questions/17092299/how-to-use-css-and-javascript-to-create-a-blurred-frosted-background关于解决模糊问题，以及一种解决方案 http://jsfiddle.net/apaul34208/TfWs3/79/似乎是使用html2Canvas http://html2canvas.hertzen.com/插入。
然而，这是重新创建整个模糊内容，包括手动重新创建的样式等。这是非常令人印象深刻的工作，但对于这种效果来说似乎是巨大的杀伤力（无论是在性能还是尺寸上）。
我想做的是创建某种垫片只是为了-moz-element https://developer.mozilla.org/en-US/docs/Web/CSS/element。看起来像那样应该可以使用 SVGforeignObject http://robert.ocallahan.org/2011/11/drawing-dom-content-to-canvas.html，但是这会带来安全问题，并且如果您的 HTML 不是有效的 XML，则会失败。
有什么办法可以模拟-moz-element（使用画布、SVG 或其他东西）我不必解析/重绘整个覆盖区域？
支持的浏览器背景图 http://www.w3.org/TR/SVG/filters.html#BackgroundImage伪输入允许您过滤元素后面的内容。 Opera 12 支持这一点，也许其他一些 UA 也支持。
我认为 Opera 12 还支持 SVG 1.2 Tiny 功能外部外部对象 http://www.w3.org/TR/SVGTiny12/extend.html#ForeignObjectElement i.e.
<foreignObject xlink:href="external file url"/>
您可以将其与backgroundImage 结合起来，将html 内容作为背景，即使html 内容不是有效的XML。
不过，您的情况可能会因其他用途而异，正如您所说，Firefox 有不同的解决方案。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
