Le modèle backdrop-filter de WebKit s'est avéré extrêmement utile. Je l'ai utilisé pour créer une démo pour un design sur lequel je travaillais et qui dépend fortement de l'esthétique du "verre dépoli", mais j'ai été consterné de constater qu'il avait un minimum de compatibilité avec les navigateurs, fonctionnant uniquement en mode expérimental. est activé dans Opera ou Chrome. Je voudrais que mon design soit fonctionnel sur tous les navigateurs, alors j'ai examiné quelques autres solutions pour créer un flou de verre dépoli. Jusqu'à présent, j'ai rencontré des articles et des questions Stack Overflow sur la façon de flouter des images ou des vidéos, mais ont été incapables de trouver des solutions qui pourraient brouiller les parties d'un div. -webkit-filter a fonctionné à travers un peu plus de navigateurs, mais ne résout pas mon problème, car je n'ai besoin de flouter que des parties spécifiques de div plutôt que la totalité div.Verre givré ressemblant à WebKit dans les autres navigateurs
J'ai créé a demo of the background blur Je vais. Cela fonctionne uniquement dans Safari pour le moment, comme expliqué précédemment. Est-il possible que je peux recréer cela dans d'autres navigateurs en conformité avec les exigences suivantes?
- Ne pas forcer les utilisateurs à activer « les fonctionnalités expérimentales » dans Chrome ou Opera
- Ne nécessite pas de programmation des captures d'écran de la zone derrière le modal (voir la démo pour un exemple de ce que le modal devrait ressembler) et puis les brouiller avec un filtre SVG
- est sensible
- a un support optimal cross-browser
EDIT: Pour démontrer ce que je fais référence, voici deux images qui font ou ne pas faire ce que je voudrais obtenir:
incorrecte (de ma démo, affiché dans le navigateur Vivaldi (Chrome)): 
Dans cette configuration, il n'y a pas de flou; seulement une superposition transparente.
correcte (de ma démo, montré dans Safari): 
Dans cette configuration, la fenêtre modale brouille uniquement les éléments directement derrière elle, plutôt que le flou div entier s.
Je suis également curieux de savoir si une solution SVG fonctionnerait du tout, si rien d'autre n'est possible. J'utilise un éditeur SVG pour créer mes maquettes, et je suis capable d'effectuer un flou d'arrière-plan en utilisant ce logiciel, donc je me demande si l'écriture de toute ma page Web dans SVG serait une solution peu pratique mais appropriée.