Comment obtenir un effet d'arrière-plan flou sur les superpositions CSS sans flouter la superposition elle-même ?

Obtention d'un effet de verre dans les superpositions CSS : résolution des problèmes de flou

Problème : Application d'un effet de flou sur un div de superposition s'avère difficile, laissant le contenu derrière la superposition non flou. Recherche d'une solution simple et multi-navigateurs.

Solution :

L'exemple fourni dans le jsfiddle présente le problème courant avec les effets de flou dans les superpositions CSS : ils brouillent la superposition lui-même plutôt que sa toile de fond. Pour remédier à cela, envisagez d'exploiter la propriété backdrop-filter.

CSS mis à jour :

#overlay {
    ... (previous CSS) ...

    backdrop-filter: blur(6px);
}

Avantages :

• Plus précis : Flou la toile de fond au lieu de la superposition, obtenant ainsi l'effet souhaité.
• Compatibilité entre navigateurs : Pris en charge dans les principaux navigateurs, notamment Chrome, Firefox et Edge.
• Code simplifié : Supprime le besoin de plusieurs propriétés de filtre, offrant ainsi un système plus propre et plus maintenable. solution.

Remarque :

La prise en charge du navigateur pour backdrop-filter peut ne pas être parfaite, en particulier dans les anciennes versions. Cependant, il offre une amélioration significative par rapport aux filtres CSS précédemment implémentés et est généralement suffisant pour la plupart des cas d'utilisation où les effets de flou ne sont pas essentiels.

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!