css Blur -Ausgabe: Ausschließen von untergeordneten Elementen aus dem Blur -Effekt des Elternteils

Bei der Anwendung eines Unschärfesfilters auf ein übergeordnetes Element mit CSS ist es unvermeidbar, dass untergeordnete Elemente auch den Effekt vererben. Es gibt jedoch eine Lösung, um Kinderelemente von dieser Unschärfe auszunehmen, ohne die absolute Positionierung zu verwenden.

Um dies zu erreichen, erstellen Sie zwei verschachtelte Divs innerhalb des übergeordneten Divs: eine für den Hintergrund und eine andere für den Inhalt. Zuweisen "Position: Relativ" dem übergeordneten Div und "Position: absolut; ober: 0px; rechts: 0px; unten: 0px; links: 0px;" (oder setzen Sie Höhe/Breite auf 100%) auf die Hintergrunddiv. Dies stellt sicher, dass der Hintergrund -Div die übergeordnete Div.

durch Trennung des Hintergrundelements aus dem Inhaltselement, der auf das Hintergrund Div angewandte Teilen, nicht auf das untergeordnete Element, das den Text oder einen anderen gewünschten Inhalt enthält Position: Relativ; Höhe: 100px; Breite: 100px; } #background { Position: absolut; Top: 0; links: 0; Rechts: 0; unten: 0; Hintergrundfarbe: Rot; Filter: Blur (3px); Z -Index: -1; }