Wie erzielt man einen CSS-Glasunschärfeeffekt auf einem Overlay?

CSS-Glas-/Unschärfeeffekt auf eine Überlagerung anwenden

F: Einen Unschärfeeffekt auf eine halbtransparente Überlagerung implementieren

Ein Webentwickler hat Schwierigkeiten, einen Unschärfeeffekt auf ein Overlay-Div anzuwenden, sodass der Inhalt hinter dem Div sichtbar wird unscharf.

Vorheriger Versuch:

Der Entwickler hat versucht, den Effekt mithilfe des folgenden CSS zu implementieren:

#overlay {
    filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter:blur(4px);
}

Dieser Ansatz war jedoch erfolglos .

Überarbeitet Lösung:

Für eine einfachere und modernere Lösung kann der Entwickler die Hintergrundfiltereigenschaft verwenden:

#overlay {
    backdrop-filter: blur(6px);
}

Browser-Unterstützung:

Beachten Sie, dass die Browserunterstützung für den Hintergrundfilter nicht umfassend ist. Für viele Anwendungsfälle ist ein Unschärfeeffekt jedoch nicht kritisch.

Das obige ist der detaillierte Inhalt vonWie erzielt man einen CSS-Glasunschärfeeffekt auf einem Overlay?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!