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 :

1. Enveloppez le contenu dans une classe spécifique (par exemple, "blur-bgimage") :

<code class="html"><div class="blur-bgimage">
  <span>Main Content</span>
</div></code>

2. Stylez le : pseudo-élément before au sein de la classe pour imiter l'image d'arrière-plan et appliquer l'effet de flou :

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

3. Le pseudo-élément :before superpose le contenu, héritant de l'image d'arrière-plan et appliquant l'effet de flou . L'index z négatif le positionne derrière le contenu.
4. L'ajout de la classe flou-bgimage au conteneur parent déclenche l'effet de flou, tandis que sa suppression restaure la clarté d'origine.

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!