Comment flouter l'arrière-plan d'une division parent sans affecter les éléments enfants en utilisant uniquement CSS ?

Comment flouter une division parent sans affecter les éléments enfants (solution CSS uniquement)

Lors de l'application de filtres CSS tels que le flou ou l'opacité à une div parent, les éléments enfants qu'il contient peuvent également être affectés. Pour résoudre ce problème sans utiliser le positionnement absolu, envisagez la solution suivante :

Créez des divs séparés pour l'arrière-plan et le contenu :

1. Créez deux divs dans le div parent. : un pour l'image de fond et un autre pour le contenu.
2. Attribuer la position : par rapport au parent div.

Position Background Div Absolument :

1. Attribuer une position : absolue ; haut : 0 ; à droite : 0 ; bas : 0 ; gauche : 0 ; au div destiné à l'image d'arrière-plan.
2. Cela garantit que le div d'arrière-plan couvre l'intégralité du div parent.

Ajouter du flou au div d'arrière-plan :

1. Appliquez la propriété filter: blur() au div d'arrière-plan.
2. Définissez le z-index sur un valeur négative (-1, par exemple) pour la placer derrière le div de contenu.

Exemple :

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

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

<div>

En utilisant cette méthode , l'image d'arrière-plan peut être floue sans affecter le div enfant contenant le contenu.

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!