Ich möchte ein Overlay für die Opazitätsunschärfe erstellen, ähnlich wie Windows Aero oder iOS7. Leider können die Eigenschaften filter: blur() oder filter: url(#svgBlur) nur auf das Element und nicht auf den Inhalt dahinter angewendet werden.
Um das zu umgehen, brauchen wir eine Kopie des verschwommenen Hintergrunds. Dies ist in FX möglich, indem die experimentelle CSS-Eigenschaft background: -moz-element(#elementId) verwendet wird. Damit kann ich den gewünschten Effekt nur in FX erzielen.
Es gibt andere fragen zum Lösen des Unschärfeproblems und eine Lösung scheint die Verwendung der html2Canvas einstecken.
Es wird jedoch der gesamte unscharfe Inhalt neu erstellt, einschließlich manuell neu erstellter Stile und Ähnlichem. Es ist eine sehr beeindruckende Arbeit, aber es scheint für diese Art von Effekt wie massiver Overkill (sowohl in der Leistung als auch in der Größe) zu sein.
Was ich tun möchte, ist create ist eine Art Shim nur für -moz-element . Es sieht so aus, als ob mit einem SVG foreignObject möglich sein sollte, aber das hat sowohl Sicherheitsprobleme als auch einen Fehler, wenn Ihr HTML kein gültiger XML-Code ist.
Gibt es eine Art Emulation von -moz-element (mit Canvas, SVG oder etwas anderem), wo ich den gesamten überlagerten Bereich nicht analysieren / neu zeichnen muss?
Browser, die die Pseudoeingabe BackgroundImage unterstützen, können den Inhalt eines Elements filtern. Opera 12 unterstützt das und möglicherweise auch andere UAs.
Ich denke, Opera 12 unterstützt auch die SVG 1.2 Tiny-Funktion mit einem externen foreignObject
%Vor%Sie könnten dies mit backgroundImage kombinieren, um HTML-Inhalt als Hintergrund zu haben, auch wenn der HTML-Inhalt nicht gültiges XML ist.
Ihr Kilometerstand kann jedoch mit anderen UAs variieren und wie Sie sagen, hat Firefox eine andere Lösung.
Sie können ein Plugin ausprobieren, das ich kürzlich gemacht habe, genannt AeroJS . Es macht genau das, wonach Sie suchen und unterstützt alles außer IE.
EDIT: Ich entschuldige mich dafür, dass ich keine Beschreibung des Plugins habe.
Grundsätzlich arbeitet AeroJS so, dass er den HTML-Code eines bestimmten Elements (backgroundElement), das Hintergrundbild eines bestimmten Elements (backgroundImage) und das vorangestellte Element dem angegebenen Element voranstellt. Dann wird mit dem Unschärfefilter von WebKit eine bestimmte Menge an Unschärfe (blurAmount) auf die Elemente im Hintergrund angewendet. Es ist immer noch in den frühen Phasen der Entwicklung, so dass Fehler erwartet werden. Ein Nachteil von AeroJS ist, dass es fast vollständig statisch ist. Sie können sich um das Element herum bewegen, und alle dahinter liegenden Elemente werden unscharf angezeigt. Alle Änderungen, die mit dem ursprünglichen DOM auftreten, werden jedoch nicht im unscharfen / kopierten HTML angezeigt. Dazu wird ein benutzerdefinierter Code benötigt.