Flou CSS sur l'image d'arrière-plan tout en préservant la clarté du contenu

Dans une tentative de floutage d'une image d'arrière-plan dans un paramètre CSS, il est courant de rencontrer le problème où le contenu (texte ou autres éléments) devient également flou. C'est là que le concept de z-index et de pseudo-éléments entre en jeu.

Pour flouter l'image d'arrière-plan sans affecter le contenu, l'approche suivante peut être utilisée :

1. Création d'un conteneur pour l'arrière-plan : Placez l'image d'arrière-plan dans un div ou un autre conteneur et attribuez-lui une classe, telle que "blur-bgimage."
2. Introduction d'un pseudo-élément : Dans la classe "blur-bgimage", ajoutez une pseudo-classe comme :before. Cela crée un calque derrière le conteneur qui hérite de l'image d'arrière-plan.
3. Flou de l'arrière-plan : Appliquez l'effet de flou au pseudo-élément à l'aide de filtres CSS. Cela rendra flou l'image d'arrière-plan héritée sans affecter le contenu.
4. Superposition du contenu : Placez le contenu dans le conteneur "blur-bgimage", en vous assurant qu'il a un z-index plus élevé (par ex. , z-index : 1) que l'arrière-plan flou (z-index : 0).

Voici un exemple code :

.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;
}

En mettant en œuvre cette approche, vous pouvez efficacement flouter l'image d'arrière-plan tout en préservant la clarté de votre contenu, permettant ainsi des conceptions de sites Web visuellement attrayantes.