Wie verwischt man den Hintergrund eines übergeordneten DIV, ohne die untergeordneten Elemente zu beeinträchtigen?

DIV-Hintergrund verwischen, ohne die untergeordneten Elemente zu beeinflussen (absolute Positionierung vermeiden)

Beim Anwenden des Unschärfe- oder Deckkrafteffekts auf ein übergeordnetes DIV-Element wird dies verhindert wirkt sich auch auf die untergeordneten Elemente aus. Um dies zu vermeiden, ist eine kreative Lösung erforderlich.

Alternative Lösung

Erstellen Sie zwei untergeordnete DIVs im übergeordneten Container:

• Hintergrund-DIV:Absolut innerhalb des übergeordneten Elements positioniert (oben:0px; rechts:0px; unten:0px; left:0px; oder 100 % Breite/Höhe)
• Content DIV: Wird innerhalb des Hintergrund-DIV positioniert und enthält den Text oder andere Elemente

Codebeispiel

#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 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<div>

Bei diesem Ansatz bleibt der Inhalts-DIV bestehen unbeeinflusst, während der Hintergrund unscharf ist.

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