CSS: Bereitstellung einer Alternative für den nicht verfügbaren Hintergrundfilter

Auf die Hintergrundfilterfunktion in CSS kann in den meisten modernen Browsern weiterhin nicht zugegriffen werden. Während wir davon ausgehen, dass es in Zukunft unterstützt wird, ist die Entdeckung alternativer Lösungen unerlässlich.

Eine Methode, einen ähnlichen Effekt zu erzielen, ist die Verwendung eines Hintergrunds mit subtiler Transparenz. Der folgende CSS-Code veranschaulicht diesen Ansatz:

/* Slightly transparent fallback */
.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}

/* Blurred effect with backdrop support */
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .backdrop-blur {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
  }
}

Wenn der Hintergrundfilter nicht unterstützt wird, dient der leicht transparente Hintergrund als Ersatz. Browser, die Hintergrundfilter unterstützen, zeigen einen unscharfen Effekt an.

Beispiele, die die Effekte ohne und mit Hintergrundfilter-Unterstützung veranschaulichen, finden Sie unten:

[Bild des transparenten Fallbacks]
[ Bild verschwommen]

Durch die Übernahme dieser Strategie können Sie einen optisch ansprechenden Filter in Elemente integrieren, selbst in Browsern, die keine nativen Hintergrundfilterfunktionen haben.