Comment flouter une image d'arrière-plan en CSS sans flouter le contenu ?

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à qu'interviennent le concept de z-index et de pseudo-éléments.

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 : Au sein de 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).

Vous trouverez ci-dessous un exemple de code :

<code class="css">.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;
}</code>

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

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!