9

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

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

关于解决模糊问题还有其他 问题，其中一种解决方案似乎是使用html2Canvas插件。

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

我想做的是创建某种垫片，仅用于-moz-element. 看起来应该可以使用 SVGforeignObject，但是如果您的 HTML 不是有效的 XML，那么它既有安全问题，也会失败。

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

4

3 回答 3

2

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

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

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

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

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

于 2013-09-20T14:39:12.770 回答
0

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

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

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

于 2015-07-12T23:31:00.293 回答
-5

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

也许与：

#myElementID *
于 2013-09-20T15:37:15.373 回答