Maison > Article > interface Web > Comment flouter une image d’arrière-plan sans affecter la clarté du contenu ?
Créer un flou d'image d'arrière-plan sans affecter le contenu
Dans cet exemple, l'objectif est de flouter l'image d'arrière-plan sans compromettre la clarté de l'image. contenu (dans ce cas, un élément span).
Problème
Lors de l'application de l'effet de flou à l'image d'arrière-plan à l'aide de CSS, le contenu de l'élément est également flou . Cela pose un défi pour préserver la lisibilité du texte ou d'autres contenus.
Solution
Pour obtenir l'effet souhaité, des pseudo-classes CSS peuvent être utilisées. La pseudo-classe :before est parfaite pour ce scénario. Voici comment procéder :
<code class="html"><div class="blur-bgimage"> <span>Main Content</span> </div></code>
<code class="css">.blur-bgimage:before { content: ""; position: absolute; width: 100%; height: 100%; background-image: inherit; z-index: -1; filter: blur(10px); // Adjust the blur radius as desired transition: all 2s linear; }</code>
Ceci La méthode brouille efficacement l'image d'arrière-plan tout en conservant la netteté du contenu dans l'élément.
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!