Wie kann verhindert werden, dass untergeordnete Elemente Unschärfeeffekte in CSS erben?

Unschärfeeffekt auf untergeordneten Elementen mit CSS entfernen

Bei der Verwendung von CSS-Unschärfeeffekten auf einem übergeordneten Element tritt häufig das Problem auf, dass untergeordnete Elemente die Unschärfe ebenfalls erben. Um dieses Problem zu lösen, können wir ein separates Div innerhalb des übergeordneten Divs erstellen und stattdessen den Unschärfeeffekt darauf anwenden.

Implementierung

1. Fügen Sie ein zusätzliches Div innerhalb des Inhalts-Divs hinzu und weisen Sie ihm ein zu Klasse, wie zum Beispiel Overlay.

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

2. In CSS weisen Sie dem Overlay-Div den Unschärfeeffekt und das Hintergrundbild zu und stellen Sie sicher, dass sein Z-Index niedriger ist als das Deckkraft-Div:

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

Indem Sie dem Overlay-Div einen niedrigeren Z-Index geben, werden die untergeordneten Elemente innerhalb des Opazitäts-Div darüber positioniert, um sicherzustellen, dass sie nicht vom Unschärfeeffekt betroffen sind.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass untergeordnete Elemente Unschärfeeffekte in CSS erben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!