Quiero crear una superposición de desenfoque de opacidad, similar a Windows Aero o iOS7. Desafortunadamente, elfilter: blur() ofilter: url(#svgBlur) Las propiedades solo pueden aplicarse al elemento, no al contenido detrás de él.

Para solucionar esto necesitamos una copia del fondo que está borrosa. Esto es posible en FX usando elbackground: -moz-element(#elementId) Propiedad CSS experimental. Usando eso puedo obtener el efecto que quiero enSolo efectos.

Existenotro preguntas sobre resolver el problema de desenfoque, yuna solución parece ser el uso de lahtml2Canvas enchufar.

Sin embargo, eso es recrear todo el contenido borroso, incluidos los estilos recreados manualmente y similares. Es un trabajo muy impresionante, pero parece un exceso excesivo (tanto en rendimiento como en tamaño) para este tipo de efecto.

Lo que quiero hacer es crear una especie de calza sólo para-moz-element. Se parece a esodebería ser posible utilizando un SVGforeignObject, pero eso tiene problemas de seguridad y falla si su HTML no es un XML válido.

¿Hay algún modo de emular?-moz-element (usando canvas, SVG, o algo más) donde no tengo que analizar / redibujar toda el área superpuesta?