Comment puis-je créer une superposition floue semi-transparente à l'aide de CSS ?

Application d'un effet de verre/flou CSS à une superposition

Problème :

Création d'un div de superposition semi-transparent avec un arrière-plan flou pour brouiller les éléments derrière lui. Cependant, le code CSS actuel (avec effets de filtre) ne parvient pas à produire le résultat souhaité.

CSS :

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    background:black;
    background:rgba(0,0,0,0.8);

    filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter:blur(4px);
}

Solution :

Pour obtenir l'effet souhaité, envisagez plutôt d'utiliser la propriété CSS background-filter. Cette méthode est plus simple et offre une meilleure prise en charge entre navigateurs :

#overlay {
    backdrop-filter: blur(6px);
}

Remarque : La prise en charge par les navigateurs de background-filter n'est pas universelle, mais elle devrait fonctionner dans la plupart des navigateurs modernes. Dans les cas où le flou n'est pas indispensable, cette alternative peut apporter une solution fiable.

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!