Wie kann verhindert werden, dass untergeordnete Elemente den CSS-Unschärfeeffekt eines übergeordneten Elements erben?

CSS-Unschärfeproblem: Untergeordnete Elemente vom Unschärfeeffekt des übergeordneten Elements ausschließen

Beim Anwenden eines Unschärfefilters auf ein übergeordnetes Element mithilfe von CSS ist es unvermeidbar, dass auch untergeordnete Elemente den Effekt erben . Es gibt jedoch eine Lösung, um untergeordnete Elemente von dieser Unschärfe zu befreien, ohne die absolute Positionierung zu verwenden.

Um dies zu erreichen, erstellen Sie zwei verschachtelte Divs innerhalb des übergeordneten Divs: eines für den Hintergrund und eines für den Inhalt. Weisen Sie „position:relative“ dem übergeordneten Div und „position:absolute; top:0px; right:0px; bottom:0px; left:0px;“ zu. (oder setzen Sie Höhe/Breite auf 100 %) auf das Hintergrund-Div. Dadurch wird sichergestellt, dass das Hintergrund-Div das übergeordnete Div vollständig abdeckt.

Durch die Trennung des Hintergrundelements vom Inhaltselement wirkt sich der auf das Hintergrund-Div angewendete Unschärfefilter nicht auf das untergeordnete Element aus, das den Text oder andere gewünschte Inhalte enthält.

Hier ist ein 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;
}

<div></div>

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