Comment flouter les images d'arrière-plan sans affecter la clarté du contenu ?

Flou des images d'arrière-plan sans affecter le contenu

Dans le but de créer un design visuellement attrayant, les développeurs rencontrent souvent un défi lorsqu'ils floutent l'image d'arrière-plan d'une page Web. Cependant, le flou de l’image affecte souvent également le contenu principal (texte et éléments). Cela pose la question : comment pouvons-nous flouter l'image d'arrière-plan sans sacrifier la clarté de notre contenu ?

La solution réside dans l'utilisation de CSS et de JavaScript pour créer un calque séparé pour l'arrière-plan flou tout en gardant le calque de contenu distinct. Voici l'extrait de code complet :

.blur-bgimage {
    overflow: hidden;
    margin: 0;
    text-align: left;
}
.blur-bgimage:before {
    content: "";
    position: absolute;
    width : 100%;
    height: 100%;
    background: inherit;
    z-index: -1;

    filter        : blur(10px);
    -moz-filter   : blur(10px);
    -webkit-filter: blur(10px);
    -o-filter     : blur(10px);

    transition        : all 2s linear;
    -moz-transition   : all 2s linear;
    -webkit-transition: all 2s linear;
    -o-transition     : all 2s linear;
}

Cet extrait de code crée un pseudo-élément (:before) qui hérite de l'image d'arrière-plan. En positionnant ce pseudo-élément de manière absolue, on crée un calque séparé pour l'arrière-plan flou. L'effet de flou est appliqué à l'aide de la propriété filter.

Pour flouter l'arrière-plan, ajoutez simplement la classe "blur-bgimage" à l'élément souhaité. Pour supprimer le flou, supprimez la classe. JavaScript peut être utilisé pour ajouter et supprimer dynamiquement la classe, permettant un contrôle dynamique de l'effet de flou.

En mettant en œuvre cette technique, vous pouvez créer des designs visuellement époustouflants avec des images d'arrière-plan floues tout en conservant la clarté du contenu de votre site Web. .

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!