等效于其他浏览器中的`-moz-element`？答案

【问题标题】：Equivalent for `-moz-element` in other browsers?等效于其他浏览器中的`-moz-element`？
【发布时间】：2013-09-25 23:47:43
【问题描述】：

我想创建一个不透明模糊覆盖，类似于 Windows Aero 或 iOS7。不幸的是，filter: blur() 或 filter: url(#svgBlur) 属性只能应用于元素，不能应用于其背后的内容。

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

有other questions关于解决模糊问题，one solution貌似是使用html2Canvas插件。

但是，这是重新创建整个模糊内容，包括手动重新创建的样式等。这是一项非常令人印象深刻的工作，但对于这种效果来说，这似乎是一种巨大的矫枉过正（无论是在性能上还是在尺寸上）。

我想做的是为-moz-element 创建某种垫片。看起来像 should be possible using an SVG foreignObject，但如果您的 HTML 不是有效的 XML，它会同时存在安全问题和失败。

有没有什么方法可以模拟-moz-element（使用画布、SVG 或其他东西）而我不必解析/重绘整个覆盖区域？

【问题讨论】：

你不能使用半透明背景图片作为后备并收工吗？
@cimmanon 实际上一个 CSS opacity 标志将是不兼容浏览器的后备方案，但仅此而已：后备方案。
问这个问题已经 2 年多了，但 firefox 仍然是唯一支持这个很棒的功能的浏览器。真可惜。

标签： css firefox canvas svg shim

【解决方案1】：

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

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

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

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

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

【讨论】：

这让我可以使用 SVG 内容作为其他 SVG 内容的背景 - 它可能会解决这个问题，但我不知道如何解决。

【解决方案2】：

您可以查看我最近制作的名为AeroJS 的插件。它完全符合您的要求，并支持除 IE 之外的所有内容。

编辑：我很抱歉没有包含插件的描述。

基本上，AeroJS 的工作方式是获取指定元素的 HTML (backgroundElement)、指定元素的背景图像 (backgroundImage) 并将它们添加到指定元素。然后，使用 WebKit 的模糊过滤器，将指定量的模糊（blurAmount）应用于背景中的元素。它仍处于开发的早期阶段，因此预计会出现错误。使用 AeroJS 的一个缺点是它几乎完全是静态的。您可以在元素周围移动，它后面的所有内容都将被模糊，但是原始 DOM 发生的任何更改都不会反映在模糊/复制的 HTML 中。为此将需要自定义代码。

【讨论】：

这确实在一定程度上模糊了内容，尽管它仍然需要创建一个完整的副本才能在某些东西后面应用为模糊。没有投票，因为它都在外部链接中（对于一个upvote，内容必须在SO中，并解释它是如何工作的）。查看您的代码，它看起来只是将内容包装在 <div> 中，并应用了模糊样式。对于未应用类或具有非唯一类的元素，您还有一个严重的错误。

【解决方案3】：

如果这些属性只适用于选定的元素，为什么不全选？

也许有：

#myElementID *

【讨论】：

我不明白这有什么帮助。 -moz-element 让我将一个元素的背景设置为另一个元素。这就是我想要做的：使用页面一部分的屏幕截图作为页面另一部分的背景。