Wie kann ich den Hintergrund eines Divs verwischen, ohne seine untergeordneten Elemente zu verwischen?

Ein Div verwischen, ohne die untergeordneten Elemente zu beeinflussen: Eine Anleitung

Beim Anwenden einer Unschärfe auf ein Div stehen Benutzer oft vor der Herausforderung, dass es unbeabsichtigt zu einer Unschärfe kommt Auch untergeordnete Elemente werden verwischt. Um dieses Problem zu beheben, ist es wichtig, die Einschränkungen der Unschärfe- und Deckkrafteigenschaften in CSS zu verstehen. Standardmäßig wirken sich diese Eigenschaften sowohl auf die darin enthaltenen übergeordneten als auch untergeordneten Elemente aus.

Alternative Lösung: Inhalt und Hintergrund trennen

Um das Verwischen untergeordneter Elemente zu vermeiden, besteht eine praktikable Lösung darin: Erstellen Sie zwei separate Elemente innerhalb des übergeordneten Div: eines für den Hintergrund und eines für das Inhalt.

Implementierung:

1. Setzen Sie die Position des übergeordneten Divs auf „relativ“.
2. Erstellen Sie ein untergeordnetes Element für den Hintergrund und legen Sie es fest seine Position auf „absolut“, mit den Werten „oben“, „rechts“, „unten“ und „links“ von 0 (oder legen Sie seine Höhe und Breite auf fest). 100 %).
3. Wenden Sie die Unschärfe- oder Deckkrafteigenschaft auf das untergeordnete Hintergrundelement an.

Durch die Isolierung des Hintergrunds auf diese Weise wird das untergeordnete Inhaltselement nicht von der Unschärfe beeinflusst oder auf das übergeordnete Element angewendete Deckkraft div.

Beispiel:

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

Das obige ist der detaillierte Inhalt vonWie kann ich den Hintergrund eines Divs verwischen, ohne seine untergeordneten Elemente zu verwischen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!