Equivalent for `-moz-element` in other browsers?

问题

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.

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.

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

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.

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.

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?

回答1:

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.

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"/>

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

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

回答2:

You can check out a plugin I recently made called AeroJS. It does exactly what you're looking for and supports everything but IE.

EDIT: My apologies for not not including a description of the plugin.

Basically, the way AeroJS works is by taking the HTML of a specified element (backgroundElement), the background image of a specified element (backgroundImage) and prepending them to the specified element. Then, using WebKit's blur filter, a specified amount of blur (blurAmount) is applied to the elements in the background. It's still in the early stages of development so bugs are expected. One drawback of using AeroJS is that it's almost entirely static. You can move around the element and everythung behind it will be blurred however any changes that happen to the original DOM will not be reflected in the blurred/copied HTML. Custom code will be needed for that.