Comment empêcher les filtres de flou d'affecter les éléments enfants ?

Comment supprimer l'effet de flou sur les éléments enfants

Lors de l'application d'un filtre de flou à un élément parent, il peut parfois affecter ses éléments enfants comme Bien. Pour éviter cet effet indésirable, une solution intelligente consiste à créer un div supplémentaire au sein de l'élément parent.

Solution :

1. Créer un Overlay Div :

   Imbibez un div dans l'élément parent avec une image d'arrière-plan qui correspond à l'effet de flou. Attribuez-lui un z-index inférieur à celui du div parent.

   <code class="html"><div class="content">
       <div class="overlay"></div>
       <div class="opacity">...</div>
   </div></code>

   Copier après la connexion

2. Appliquer l'effet de flou au div de superposition :

   Appliquer l'effet de flou au div de superposition au lieu du div parent en utilisant CSS :

   <code class="css">.content .overlay {
       background-image: url('...');
       -webkit-filter: blur(3px);
       -moz-filter: blur(3px);
       -o-filter: blur(3px);
       -ms-filter: blur(3px);
       filter: blur(3px);
       z-index: 0;
   }</code>

   Copier après la connexion

3. Positionnez le div d'opacité devant :

   Le div d'opacité doit être positionné devant le div de superposition avec un indice z plus élevé.

   <code class="css">.opacity {
       z-index: 10;
   }</code>

   Copier après la connexion

Avantages de cette approche :

• Le L'effet de flou est contenu dans le div de superposition, l'empêchant d'affecter les éléments enfants.
• Le div d'opacité peut être utilisé pour contrôler l'opacité et d'autres propriétés du contenu sans interférer avec l'effet de flou.

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!