Comment créer un effet de flou de fond avec CSS, même dans les navigateurs plus anciens ?

CSS : Canvas-Filter Polyfill

Backdrop-filter, une fonctionnalité CSS permettant le flou et d'autres effets sur l'arrière-plan d'un élément, reste largement non pris en charge dans les navigateurs modernes. Comme alternative, envisagez d'utiliser un arrière-plan légèrement transparent comme solution de secours :

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

@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 fournit une solution de secours transparente pour les navigateurs ne prenant pas en charge le filtre de fond, tout en permettant un effet de flou dans les navigateurs pris en charge. Le CSS permet également de futures révisions CSS qui pourraient introduire une prise en charge du filtre de toile de fond sans préfixe.

Visualisation :

[Image de secours transparent sans prise en charge du filtre de toile de fond] [Image d'effet flou avec 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!