Comment empêcher les éléments enfants d'hériter des effets de flou en CSS ?

Suppression de l'effet de flou sur les éléments enfants avec CSS

Lors de l'utilisation d'effets de flou CSS sur un élément parent, il est courant de rencontrer le problème des éléments enfants héritant également du flou. Pour résoudre ce problème, nous pouvons créer un div séparé au sein du parent et lui appliquer l'effet de flou à la place.

Implémentation

1. Ajoutez un div supplémentaire dans le div de contenu et attribuez-lui un classe, telle que la superposition.

<code class="html"><div class="content">
  <div class="overlay"></div>
  <div class="opacity">
    <!-- Child elements... -->
  </div>
</div></code>

2. En CSS, attribuez l'effet de flou et l'image d'arrière-plan au div de superposition, en vous assurant que son z-index est inférieur au div d'opacité :

<code class="css">.content {
  float: left;
  width: 100%;
}

.content .overlay {
  background-image: url('images/zwemmen.png');
  height: 501px;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
  z-index: 0;
}

.opacity {
  background-color: rgba(5, 98, 127, 0.9);
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 10;
}</code>

En donnant au div de superposition un z-index inférieur, les éléments enfants dans le div d'opacité seront positionnés au-dessus, garantissant qu'ils ne sont pas affectés par 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!