Maison >interface Web >tutoriel CSS >CSS peut-il obtenir un flou d'arrière-plan pour les éléments semi-transparents sans affecter le contenu ?

CSS peut-il obtenir un flou d'arrière-plan pour les éléments semi-transparents sans affecter le contenu ?

Susan Sarandon
Susan Sarandonoriginal
2024-10-29 21:04:02913parcourir

Can CSS Achieve Background Blur for Semi-Transparent Elements without Affecting Content?

Obtenir un flou d'arrière-plan en CSS : un guide des effets transparents dynamiques

Question :

Il est souhaitable de créer un Effet de style Vista/7-aero-glass sur une fenêtre contextuelle. Bien que la compatibilité entre navigateurs ne soit pas une priorité, le site Web doit fonctionner dans les navigateurs modernes. Est-il possible de flouter l'arrière-plan d'un élément semi-transparent sans affecter son contenu en utilisant uniquement CSS ?

Réponse :

Mise à jour : octobre 2016

Utilisation de pseudo-éléments :

  • Démo : [Démo en direct](lien)
  • Utiliser un pseudo -éléments pour créer un flou d'arrière-plan sans affecter le contenu du conteneur.
  • Combinez l'utilisation de pseudo-éléments avec le filtre de flou SVG.

Compatibilité :

  • La prise en charge du filtre de flou SVG est largement disponible dans les navigateurs modernes (sauf IE).
  • La prise en charge des pseudo-éléments est limitée à Firefox.

Auparavant : utilisation de la propriété -moz-element() :

  • Démo : [Live Demo](link)
  • Employer le -propriété moz-element() en combinaison avec le filtre de flou SVG.
  • Utilisez jQuery pour le défilement si l'arrière-plan est dans une position fixe.

Compatibilité :

  • Réservé aux navigateurs Mozilla (-moz-element() est limité à Firefox).
  • Peut nécessiter des efforts supplémentaires pour la mise en œuvre dans d'autres navigateurs.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn