在其他浏览器中等同于`-moz-element`吗？ [英] Equivalent for `-moz-element` in other browsers?

问题描述

我想创建一个不透明模糊叠加层，类似于Windows Aero或iOS7。不幸的是， filter：blur（）或 filter：url（#svgBlur）属性只能应用于元素，内容背后。

I want to create an opacity blur overlay, similar to Windows Aero or iOS7. Unfortunately the filter: blur() or filter: url(#svgBlur) properties can only apply to the element, not content behind it.

为了绕过这个，我们需要一个被模糊的背景的副本。这可以在FX中使用 background：-moz-element（#elementId）实验CSS属性。使用它，我可以在外汇仅获得我想要的效果。

To get round this we need a copy of the background that is blurred. This is possible in FX using the background: -moz-element(#elementId) experimental CSS property. Using that I can get the effect I want in FX only.

有其他 ​​问题关于解决模糊问题，一个解决方案似乎是使用 html2Canvas a>插入。

There are other questions about solving the blur problem, and one solution appears to be the use of the html2Canvas plug in.

但是，这是重新创建整个模糊内容，包括手动重新创建的样式等。这是非常令人印象深刻的工作，但它似乎是大规模overkill（在性能和大小）这种效果。

However that is recreating the entire blurred content, including manually recreated styles and the like. It's very impressive work, but it seems like massive overkill (both in performance and size) for this kind of effect.

我想做的是创建是某种垫片仅适用于 -moz-element 。看起来像应该可以使用SVG foreignObject ，但是如果你的HTML不是有效的XML，它同时有安全问题和失败。

What I want to do is create is some kind of shim just for -moz-element. It looks like that should be possible using an SVG foreignObject, but that has both security issues and fails if your HTML is not valid XML.

有任何方式模仿 -moz-element （使用画布，SVG或其他），我不必解析/重绘整个覆盖区域？

Is there any way round of emulating -moz-element (using canvas, SVG, or something else) where I don't have to parse/redraw the entire overlaid area?

推荐答案

支持 BackgroundImage 伪输入允许您过滤元素后面的内容。

Browsers that support the BackgroundImage pseudo input allow you to filter the content behind an element. Opera 12 supports that and maybe some other UAs too.

我认为Opera 12也支持SVG 1.2 Tiny功能，它具有 external foreignObject ie

I think Opera 12 also supports the SVG 1.2 Tiny feature of having an external foreignObject i.e.

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

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

You could combine this with the backgroundImage to have html content as a background even if the html content was not not valid XML.

您的密码可能因其他UA而有所不同，就像您说Firefox有不同的解决方案。

Your milage may vary with other UAs though and as you say Firefox has a different solution.

这篇关于在其他浏览器中等同于`-moz-element`吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！