Comment flouter une division parent sans flouter les éléments enfants ?

Comment éviter le flou des éléments enfants lors du flou d'une div parent (sans positionnement absolu)

Flou d'une div parent à l'aide de filtres CSS comme le flou peut être indésirable brouiller également les éléments enfants. Cependant, il existe une solution pour isoler l'effet de flou uniquement sur le div parent sans recourir à un positionnement absolu.

Créer des éléments internes

Divisez le div parent en deux éléments internes :

• fond: Responsable du flou background
• contenu : Contient les éléments non flous

Éléments de positionnement

Appliquer les styles suivants :

• #parent_div : Définir la position : relative pour permettre le positionnement absolu de l'intérieur éléments.
• #background : Utiliser la position : absolue ; haut : 0 ; à droite : 0 ; bas : 0 ; gauche : 0 ; (ou hauteur/largeur : 100 %) pour le positionner précisément sur le div parent.
• #content : Conserver sa position par défaut : statique.

Application du flou

Appliquez le filtre : blur(3px) ou -webkit-filter: blur(3px) à #background, plutôt que #parent_div. Cela garantit que l'effet de flou est limité à l'élément d'arrière-plan, laissant l'élément de contenu net et inchangé.

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

#content {
  /* No special positioning required */
}

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!