Diese Seite versucht einen CSS-Filter auf den Hintergrund (Den Bereich, auf den das Element gerendert wird, nicht das Hintergrundbild) eines Elementes anzuwenden.
Getestet mit Firefox 32 (in FF 31 ist mix-blend-mode noch deaktiviert).
Ziel des Ganzen ist es, einen Glass-Effekt zu erzeugen, also einen halbtransparenten Hintergrund, der die durchscheinenden Elemente verwischt, wie ein Milchglas.
Versuch 1:
Text text text anderer text text
Auf diese Box wird ein Blur-Filter angewendet, der Hintergrund verschwimmt jedoch nicht.
Versuch 2:
Text text text anderer text text
Hier soll der Filter auf das BackgroundImage angewendet werden. Das Resultat und das Element sollen nacheinander gerendert werden.
Anscheinend ist der Zugriff auf den Hintergrund jedoch nicht moeglich, enable-background funktioniert wohl nur bei SVG-Elementen.
Versuch 3:
Text text text anderer text text
Hier wird beim Rendern ein Blend-Mode verwendet, der die Pixel des Hintergrundes mit denen- des Vordergrundes verrechnet. Das Ergebnis sieht vielversprechend aus.
Versuch 4:
Text text text anderer text text
Die Kombination von Blend-Mode und Filter funktioniert jedoch nicht. Anscheinend fuehrt mix-blend-mode nicht zu einer Verschmeldung von Vorder- und Hintergrund
vor dem Rendern des Layers, sondern waehrend dem Rendern des Layers. der Filter wird anscheinend vorher angewendet und das Layer nimmt danach einen anderen Weg, am Blend-Mode vorbei...
Versuch 5:
Text text text anderer text text
Wenn der Hintergrund durch ein eindeutiges Element mit id repraesentiert wird, kann dieser als Hintergrund des vorderen Elementes gerendert werden und wird somit auch gefiltert.
Jedoch scheint hinter dem gefilterten Hintergrund der eigentliche, ungefilterte - durch, falls das eindeutige Hintergrundelement nicht ueberall deckt.
Versuch 6:
Text text text anderer text text
Mit dem feMerge-SVG-Filter lässt sich nur derjenige Teil des Hintergrundes verwischen, der vom Vordergrund überdeckt wird. Dafür muss die genaue Position der Überdeckung
im relativ zum Hintergrund für jedes Element, das überdeckt wird, manuell berechnet werden. Der Vordergrund darf nicht sub-element des Hintergrunds sein. Das macht die praktische
Anwendung in vielen Fällen nach wie vor schwierig.
Versuch 7:
Text text text anderer text text
In nicht all zu ferner Zukunft sollte der backdrop-filter einen komfortablen Weg zum Background-Blurring eröffnen.