Эквивалент для `-moz-element` в других браузерах?

Я хочу создать наложение непрозрачности, похожее на Windows Aero или iOS7. К сожалению, свойства filter: blur() или filter: url(#svgBlur) могут применяться только к элементу, а не по содержанию.

Чтобы обойти это, нам нужна копия размытого фона. Это возможно в FX с использованием экспериментального CSS-свойства background: -moz-element(#elementId). Используя это, я могу получить эффект, который я хочу в только FX.

Есть другие questions о решении проблемы размытия и одно из решений представляется использование html2Canvas подключаемого модуля.

Однако это воссоздает весь размытый контент, включая созданные вручную стили и тому подобное. Это очень впечатляющая работа, но для такого эффекта кажется массивным переполнением (как по производительности, так и по размеру).

То, что я хочу сделать, это создать какую-то прокладку только для -moz-element. Похоже, что должно быть возможно с использованием SVG foreignObject, но это имеет как проблемы безопасности, так и ошибки, если ваш HTML недопустим XML.

Есть ли какой-либо способ эмуляции -moz-element (используя холст, SVG или что-то еще), где мне не нужно разбирать/перерисовывать всю область наложения?

Ответ 1

Браузеры, поддерживающие псевдо-вход BackgroundImage, позволяют фильтровать контент за элементом. Opera 12 поддерживает это и, возможно, некоторые другие UA тоже.

Я думаю, что Opera 12 также поддерживает SVG 1.2 Крошечная функция наличия внешнего внешнего объекта i.e.

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

Вы можете комбинировать это с backgroundImage, чтобы иметь html-контент в качестве фона, даже если html-контент был недействительным XML.

Ваше участие может отличаться от других UA, хотя, как вы говорите, у Firefox есть другое решение.

Ответ 2

Вы можете проверить плагин, который я недавно сделал, называемый AeroJS. Он делает именно то, что вы ищете, и поддерживает все, кроме IE.

EDIT: Мои извинения за то, что вы не указали описание плагина.

В принципе, способ AeroJS работает, беря HTML-код указанного элемента (backgroundElement), фоновое изображение указанного элемента (backgroundImage) и добавляя их к указанному элементу. Затем, используя фильтр размытия WebKit, указанное количество размытия (blurAmount) применяется к элементам в фоновом режиме. Он все еще находится на ранних стадиях разработки, поэтому ожидаются ошибки. Один из недостатков использования AeroJS состоит в том, что он почти полностью статичен. Вы можете перемещаться по элементу, и все вокруг него будут размыты, однако любые изменения, которые происходят с исходным DOM, не будут отображаться в размытом/скопированном HTML. Для этого потребуется специальный код.

Ответ 3

Если эти свойства применимы только к выбранному элементу, почему бы вам не выбрать их все?

Возможно с:

#myElementID *