Wie kann ich mit CSS ein unscharfes halbtransparentes Overlay erstellen?

Anwenden eines CSS-Glas-/Unschärfeeffekts auf eine Überlagerung

Problem:

Erstellen eines Halbtransparentes Overlay-Div mit unscharfem Hintergrund, um die dahinter liegenden Elemente unscharf zu machen. Der aktuelle CSS-Code (mit Filtereffekten) führt jedoch nicht zum gewünschten Ergebnis.

CSS:

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    background:black;
    background:rgba(0,0,0,0.8);

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

Lösung:

Um den gewünschten Effekt zu erzielen, sollten Sie stattdessen die CSS-Eigenschaft „background-filter“ verwenden. Diese Methode ist einfacher und bietet eine bessere browserübergreifende Unterstützung:

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

Hinweis: Die Browserunterstützung für den Hintergrundfilter ist nicht universell, sollte aber in den meisten modernen Browsern funktionieren. In Fällen, in denen eine Unschärfe nicht unbedingt erforderlich ist, kann diese Alternative eine zuverlässige Lösung bieten.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS ein unscharfes halbtransparentes Overlay erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!