Comment émuler le filtre de fond CSS dans les navigateurs sans support natif ?

Solution de contournement pour le filtre de toile de fond CSS

Malgré sa promesse, le filtre de toile de fond CSS reste une fonctionnalité insaisissable dans les navigateurs modernes. Avec Chrome 51 offrant un support limité via son indicateur Experimental Web Platform et Safari 9.1 nécessitant l'utilisation du préfixe -webkit-, son caractère pratique reste discutable. Heureusement, il existe des solutions de contournement qui peuvent émuler les effets souhaités en l'absence de prise en charge native du filtre d'arrière-plan.

Une approche prometteuse consiste à utiliser un arrière-plan légèrement transparent comme solution de repli. Lorsque le filtre de toile de fond n'est pas disponible, cet arrière-plan transparent constitue une solution discrète et fusionnable.

Cependant, pour les navigateurs prenant en charge le filtre de toile de fond, le code peut améliorer l'effet en réduisant davantage la transparence de l'arrière-plan et en appliquant un filtre de flou. Cette combinaison imite efficacement le comportement de background-filter.

Pour implémenter cette solution de contournement, utilisez simplement le code suivant :

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

/* 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>

Cette solution offre une compatibilité entre navigateurs, offrant une expérience visuelle cohérente quelle que soit la prise en charge par le navigateur du filtre de fond. Il comprend également des exemples pour démontrer l'effet de repli et l'effet amélioré avec la prise en charge du filtre de toile de fond.

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!