Comment puis-je flouter l'arrière-plan d'une division sans flouter ses éléments enfants ?

Flou d'un div sans affecter les éléments enfants : un guide

Souvent, lors de l'application d'un flou à un div, les utilisateurs sont confrontés au défi de brouiller également les éléments enfants. Pour résoudre ce problème, il est important de comprendre les limites des propriétés de flou et d'opacité en CSS. Par défaut, ces propriétés affectent à la fois les éléments parents et enfants.

Solution alternative : séparer le contenu et l'arrière-plan

Pour éviter de brouiller les éléments enfants, une solution viable consiste à créez deux éléments distincts dans le div parent : un pour l'arrière-plan et un autre pour le contenu.

Implémentation :

1. Définissez la position du div parent sur "relative".
2. Créez un élément enfant pour l'arrière-plan et définissez sa position sur "absolue", avec les valeurs haut, droite, bas et gauche de 0 (ou définissez sa hauteur et sa largeur sur 100%).
3. Appliquez la propriété flou ou opacité à l'élément enfant d'arrière-plan.

En isolant l'arrière-plan de cette manière, l'élément enfant de contenu ne sera pas affecté par le flou. ou opacité appliquée au parent div.

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 {
  /* Content properties here */
}

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