Comment empêcher les éléments enfants d'hériter de l'effet de flou CSS d'un parent ?

Problème de flou CSS : exclusion des éléments enfants de l'effet de flou parent

Lors de l'application d'un filtre de flou à un élément parent à l'aide de CSS, il est inévitable que les éléments enfants héritent également de l'effet . Il existe cependant une solution pour exempter les éléments enfants de ce flou sans utiliser de positionnement absolu.

Pour y parvenir, créez deux divs imbriqués au sein du div parent : un pour l'arrière-plan et un autre pour le contenu. Attribuez "position:relative" au div parent et "position:absolute; top:0px; right:0px; bottom:0px; left:0px;" (ou définissez la hauteur/largeur à 100 %) sur le div d'arrière-plan. Cela garantit que le div d'arrière-plan couvre entièrement le div parent.

En séparant l'élément d'arrière-plan de l'élément de contenu, le filtre de flou appliqué au div d'arrière-plan n'affectera pas l'élément enfant contenant le texte ou tout autre contenu souhaité.

Voici un exemple :

#parent_div {
  position: relative;
  height: 100px;
  width: 100px;
}

#background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  filter: blur(3px);
  z-index: -1;
}

<div>

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!