Comment puis-je obtenir un effet de flou Vista/Windows 7 Aero Glass pour une fenêtre contextuelle dynamique à l'aide de CSS, tout en conservant la compatibilité entre navigateurs ?

Flou d'arrière-plan avec CSS sans affecter le contenu

Question :

Pour une popup dynamique sur un site Web, vous voulez un effet de flou d'arrière-plan semblable à Aero Glass de Vista/Windows 7. Comment y parvenir en CSS tout en conservant la compatibilité avec les navigateurs modernes ?

Réponse :

Mise à jour (octobre 2016) :

Une technique améliorée exploite les pseudo-éléments et les filtres de flou SVG. Voir la démo ci-dessous :

[Démo : Utilisation d'un pseudo-élément pour le flou d'arrière-plan](demo-link)

Cette approche fonctionne sur plusieurs navigateurs, à l'exception d'IE, qui ne prend pas en charge le flou. via des filtres CSS ou SVG.

Réponse originale (avant octobre 2016) :

Utilisation de -moz-element() et du filtre de flou SVG :

1. Utilisez la propriété -moz-element() pour définir un élément comme image d'arrière-plan pour un autre élément.
2. Appliquez le filtre de flou SVG à l'image d'arrière-plan.
3. Facultativement, utilisez jQuery pour le défilement si l'arrière-plan est en position fixe.

Voir la démo ici :

[Démo : Utilisation de -moz- element() pour Background Blur](demo-link)

Limitation :

Cette méthode est limitée à Firefox en raison de l'utilisation de -moz-element(), qui n'est actuellement pris en charge que par Mozilla. Cependant, des efforts ont été déployés pour l'implémenter dans les navigateurs Webkit, un support futur est donc attendu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!