Comment puis-je obtenir un effet de « filtre de toile de fond » dans les navigateurs qui ne le prennent pas en charge ?

CSS : fournir une alternative au filtre de toile de fond indisponible

La fonctionnalité de filtre de toile de fond en CSS reste inaccessible dans la plupart des navigateurs contemporains. Alors que nous anticipons son soutien futur, la découverte de solutions alternatives devient impérative.

Une méthode pour obtenir un effet similaire consiste à utiliser un fond avec une transparence subtile. Le code CSS ci-dessous illustre cette approche :

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

/* Blurred effect with backdrop support */
@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>

Lorsque le filtre de fond n'est pas pris en charge, l'arrière-plan légèrement transparent servira de solution de repli. Les navigateurs qui prennent en charge le filtre de toile de fond afficheront un effet flou.

Des exemples illustrant les effets sans et avec la prise en charge du filtre de toile de fond sont fournis ci-dessous :

[Image de repli transparent]
[ Image floue]

En adoptant cette stratégie, vous pouvez incorporer un filtre visuellement attrayant sur les éléments, même dans les navigateurs dépourvus de capacités natives de 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!