Comment flouter l'image d'arrière-plan d'un élément en CSS tout en gardant le contenu net ?

Flou de l'image d'arrière-plan en CSS sans affecter le contenu

En CSS, vous pouvez rencontrer une situation dans laquelle vous souhaitez flouter l'image d'arrière-plan d'un élément sans affecter le contenu qu’il contient. Voici comment y parvenir :

La solution consiste à créer un pseudo-élément (:before) qui hérite de l'image d'arrière-plan de l'élément parent. Ce pseudo-élément est ensuite positionné de manière absolue et soumis à un filtre de flou. En définissant son z-index sur -1, il apparaît derrière le contenu.

Pour implémenter cela, appliquez le CSS suivant :

<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>

Vous pouvez ensuite utiliser JavaScript pour basculer une classe ( par exemple, 'blur-bgimage') qui applique ce CSS à l'élément souhaité, en floutant ou en éliminant le flou de l'image d'arrière-plan selon les besoins.

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!