Comment flouter l'arrière-plan d'un parent DIV sans affecter les éléments enfants ?

Flou de l'arrière-plan DIV sans affecter les éléments enfants (éviter le positionnement absolu)

Lors de l'application de l'effet de flou ou d'opacité à un élément DIV parent, il affecte également les éléments enfants. Pour éviter cela, une solution créative est nécessaire.

Solution alternative

Créez deux DIV enfants dans le conteneur parent :

• Background DIV : Positionné absolument au sein du parent (haut :0px ; droite :0px; bas :0px ; left:0px; ou 100% largeur/hauteur)
• Contenu DIV : Positionné dans le DIV d'arrière-plan et contenant le texte ou d'autres éléments

Exemple de code

#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 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<div><p>Avec cette approche, le contenu DIV reste inchangé tandis que l'arrière-plan est flou.</p></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!