Wie kann man ein übergeordnetes Div verwischen, ohne untergeordnete Elemente zu verwischen?

So vermeiden Sie das Verwischen untergeordneter Elemente beim Verwischen eines übergeordneten Divs (ohne absolute Positionierung)

Das Verwischen eines übergeordneten Divs mithilfe von CSS-Filtern wie „Unschärfe“ kann zu unerwünschten Ergebnissen führen Verwischen Sie auch untergeordnete Elemente. Es gibt jedoch eine Lösung, um den Unschärfeeffekt nur auf das übergeordnete Div zu beschränken, ohne auf absolute Positionierung zurückzugreifen.

Innere Elemente erstellen

Teilen Sie das übergeordnete Div in zwei innere Elemente :

• Hintergrund: Verantwortlich für die Unschärfe Hintergrund
• Inhalt:Enthält die unverwischten Elemente

Positionierungselemente

Wenden Sie die folgenden Stile an:

• #parent_div: Position festlegen: relativ, um eine absolute Positionierung des Inneren zu ermöglichen Elemente.
• #background: Position verwenden: absolut; oben: 0; rechts: 0; unten: 0; links: 0; (oder Höhe/Breite: 100 %), um es genau über dem übergeordneten Div zu positionieren.
• #content: Behalten Sie die Standardposition bei: statisch.

Unschärfe anwenden

Wenden Sie den Filter: Blur(3px) oder -webkit-filter: Blur(3px) auf #Hintergrund an, anstatt #parent_div. Dadurch wird sichergestellt, dass der Unschärfeeffekt auf das Hintergrundelement beschränkt ist und das Inhaltselement scharf und unberührt bleibt.

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 {
  /* No special positioning required */
}

Das obige ist der detaillierte Inhalt vonWie kann man ein übergeordnetes Div verwischen, ohne untergeordnete Elemente zu verwischen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!