Heim >Web-Frontend >CSS-Tutorial >Wie kann ich mit CSS ein unscharfes halbtransparentes Overlay erstellen?

Wie kann ich mit CSS ein unscharfes halbtransparentes Overlay erstellen?

Susan Sarandon
Susan SarandonOriginal
2024-11-29 14:53:10369Durchsuche

How Can I Create a Blurred Semi-Transparent Overlay Using CSS?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn