在其他浏览器中等效于`-moz-element`？

Question

我想创建一个不透明度模糊叠加层,类似于Windows Aero或iOS7.不幸的是,filter: blur()或filter: url(#svgBlur)属性只能应用于元素,而不是它背后的内容.

为了解决这个问题,我们需要一份模糊的背景副本.这在FX中可以使用background: -moz-element(#elementId)实验性CSS属性.使用它我只能在FX中获得我想要的效果.

还有其他的 问题,关于解决模糊问题,一个解决方案似乎是使用的html2Canvas插头.

然而,这是重新创建整个模糊内容,包括手动重新创建的样式等.这是非常令人印象深刻的工作,但对于这种效果来说,似乎是大规模的过度杀伤(包括性能和大小).

我想要做的是创造是某种垫片只是为了-moz-element.看起来应该可以使用SVGforeignObject,但是如果您的HTML不是有效的XML,则会出现安全问题并且会失败.

是否有任何方式来模拟-moz-element(使用画布,SVG或其他)我不需要解析/重绘整个重叠区域？

Answer 1

支持BackgroundImage伪输入的浏览器允许您过滤元素后面的内容。Opera 12 支持这一点，也许其他一些 UA 也支持。

我认为 Opera 12 还支持 SVG 1.2 Tiny 具有外部foreignObject的功能，即

<foreignObject xlink:href="external file url"/>

您可以将其与backgroundImage 结合起来，将html 内容作为背景，即使html 内容不是有效的XML。

不过，您的情况可能会因其他 UA 而异，正如您所说，Firefox 有不同的解决方案。