Comment obtenir un effet de verre flou sans compter sur un « filtre de toile de fond » ?

Une alternative floue au filtre de toile de fond insaisissable de CSS

Malgré son effet captivant, le filtre de toile de fond de CSS reste insaisissable, avec une prise en charge limitée par les navigateurs au 1er juillet 2016. En attendant avec impatience sa mise en œuvre complète, explorons une solution de contournement qui peut nous rapprocher de l'effet de verre flou souhaité.

Une solution de secours transparente

Pour les navigateurs qui ne prennent pas en charge le filtre de fond, un léger le fond transparent peut imiter l'effet du verre dépoli. Le code suivant fournit une solution de secours simple :

<code class="css">/* slightly transparent fallback */
.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}</code>

Exploiter la prise en charge des navigateurs

Pour les navigateurs qui prennent en charge le filtre de fond, nous pouvons profiter de ses capacités de flou. Voici une version augmentée du code CSS qui répond à ce scénario :

<code class="css">/* if backdrop support: very transparent and blurred */
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .backdrop-blur {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
  }
}</code>

Ce code garantit que l'effet de flou est appliqué dans les navigateurs pris en charge, tandis que le repli transparent se dégrade gracieusement pour ceux qui ne le font pas.

Exemples : Voir le flou en action

Sans prise en charge du filtre de fond, l'élément s'affiche avec un arrière-plan légèrement transparent, comme illustré par l'image suivante :

[Insérer une image de effet de repli transparent]

Avec la prise en charge du filtre de toile de fond, l'effet de verre flou prend le dessus, comme le montre l'image suivante :

[Insérer une image de l'effet flou]

Conclusion

La solution de contournement du filtre de toile de fond présentée ici fournit une solution pratique pour obtenir un effet de verre flou sur les éléments Web, quelle que soit la prise en charge du navigateur. Bien que nous prévoyions la pleine disponibilité du filtre de fond dans le futur, cette technique offre une alternative précieuse pour améliorer l'expérience utilisateur.

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!