Wie kann man den Hintergrund eines übergeordneten Divs verwischen, ohne die untergeordneten Elemente zu beeinträchtigen, indem man nur CSS verwendet?

So verwischen Sie ein übergeordnetes Div, ohne die untergeordneten Elemente zu beeinträchtigen (Nur-CSS-Lösung)

Beim Anwenden von CSS-Filtern wie Unschärfe oder Deckkraft auf ein Übergeordnetes Div, untergeordnete Elemente darin können ebenfalls betroffen sein. Um dieses Problem ohne absolute Positionierung zu lösen, ziehen Sie die folgende Lösung in Betracht:

Erstellen Sie separate Divs für Hintergrund und Inhalt:

1. Erstellen Sie zwei Divs innerhalb des übergeordneten Divs : eine für das Hintergrundbild und eine für den Inhalt.
2. Position zuweisen: relativ zum übergeordneten Element div.

Position Hintergrund Div Absolut:

1. Position zuweisen: absolut; oben: 0; rechts: 0; unten: 0; links: 0; zu dem Div, das für das Hintergrundbild vorgesehen ist.
2. Dadurch wird sichergestellt, dass das Hintergrund-Div das gesamte übergeordnete Div abdeckt.

Unschärfe zum Hintergrund-Div hinzufügen:

1. Wenden Sie die Filter-Eigenschaft „blur()“ auf das Hintergrund-Div an.
2. Setzen Sie den Z-Index auf a Negativer Wert (z. B. -1), um ihn hinter dem Inhaltsdiv zu platzieren.

Beispiel:

#parent_div {
  position: relative;
  width: 100px;
  height: 100px;
}

#background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  filter: blur(3px);
  z-index: -1;
}

<div>

Mit dieser Methode , kann das Hintergrundbild unscharf gemacht werden, ohne dass sich dies auf das untergeordnete Div auswirkt, das den Inhalt enthält.

Das obige ist der detaillierte Inhalt vonWie kann man den Hintergrund eines übergeordneten Divs verwischen, ohne die untergeordneten Elemente zu beeinträchtigen, indem man nur CSS verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!