Chcę utworzyć nakładkę rozmycia krycia, podobną do Windows Aero lub iOS7. Niestetyfilter: blur() lubfilter: url(#svgBlur) właściwości mogą mieć zastosowanie tylko do elementu, a nie do zawartości za nim.

Aby obejść to, potrzebujemy kopii tła, które jest rozmyte. Jest to możliwe w FX przy użyciubackground: -moz-element(#elementId) eksperymentalna własność CSS. Używając tego mogę uzyskać efekt, który chcęTylko FX.

Tam sąinny pytania o rozwiązywaniu problemu rozmycia ijedno rozwiązanie wydaje się, że jest to użyciehtml2Canvas podłącz.

Jednak jest to odtworzenie całej rozmytej treści, w tym ręcznie odtworzonych stylów i tym podobnych. To bardzo imponująca praca, ale wydaje się, że jest to ogromna przesada (zarówno pod względem wydajności, jak i rozmiaru) dla tego rodzaju efektu.

To, co chcę zrobić, to stworzyć coś dla siebie-moz-element. Tak to wyglądapowinno być możliwe przy użyciu SVGforeignObject, ale ma to zarówno problemy z bezpieczeństwem, jak i kończy się niepowodzeniem, jeśli Twój kod HTML nie jest prawidłowym XML.

Czy jest jakiś sposób naśladowania-moz-element (używając canvas, SVG lub czegoś innego), gdzie nie muszę parsować / przerysowywać całego nakładanego obszaru?