Witam, wiem że istnieje takie coś jak backdrop-filter, ale to zbytnio nie działa na żadnej przeglądarce poza Safari. Chciałbym więc znaleźć jakąś alternatywę pozwalającą na blur wszystkiego za divem (tła, tekstu, innych divów itp.). Znalazłem takie coś:
https://codepen.io/Kseso/pen/JBrcD
lecz, mimo że wygląda to imponująco, to nie jest to wystarczające. Blur obejmuje jedynie tło, omijane są przy tym divy i tekst (po prostu ich nie widać).
Pobierz kod z poddanej strony i przypisz opcję filter: blur; do body:after to powinno Ci “zblurować” całe tło za divami. Przetestuj.
Chodzi mi o to żeby blurowało też divy, bo tło jest już blurowane, ale poza nim nie ma bluru na niczym.
Nie znam tematu za dobrze, ale może jquery by miało coś co wyszukało by wszystkie obiekty o z-index mniejszym niż twój div i nadało dynamicznie atrybut blur. Na zamknięcie twojego diva wywołał byś jakąś funkcję zdejmującą ten atrybut ze wszystkiego. Inna sprawa to sprawdzenie obszaru do zblurowania - tylko pod divem, czyli mogło by być tak, że część jakiegoś innego obiektu pod spodem ma być zblurowana ale nie całość.
Też kiedyś próbowałem to zrobić ale blur to na chwilę obecną całkiem nowe rozwiązanie w przeglądarkach i lepiej byłoby tego unikać. Jeżeli naprawdę Ci na tym zależy to powinieneś pobawić się canvasem:
http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript
Ewentualnie stworzyć dwa div’y z czego jeden będzie odgrywał rolę tła z blurem, a drugi będzie wrapperem dla contentu. Później musisz je odpowiednio “ułożyć” żeby Ci się nie rozjeżdżały. Problem z którym się mierzysz, namieszał w głowach sporej liczbie frontendowców i wielokrotnie temat ten był poruszany na stack’ach:
Powodzenia. 