Hintergrundfilter nicht verfügbar: Wie erzielt man unscharfe Hintergrundeffekte in modernen Browsern?

CSS-Workaround: Eine vorübergehende Lösung für den schwer fassbaren Hintergrundfilter

Obwohl es sich um eine vielversprechende CSS-Funktion handelt, bleibt der Hintergrundfilter unerreichbar für moderne Browser. Derzeit bieten nur Chrome 51 (mit der Flagge „Experimental Web Platform“) und Safari 9.1 (mit dem Präfix „-webkit-“) irgendeine Unterstützung dafür. Firefox 47 hinkt in dieser Hinsicht leider hinterher.

Diese begrenzte Verfügbarkeit hat dazu geführt, dass Entwickler nach alternativen Lösungen suchen, um die gewünschten visuellen Effekte zu erzielen. Bis der Hintergrundfilter allgemein zugänglich ist, besteht eine immer beliebter werdende Problemumgehung darin, einen leicht transparenten Hintergrund als Ersatz zu verwenden:

<code class="css">/* slightly transparent fallback */
.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}

/* if backdrop support: very transparent and blurred */
@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);
  }
}</code>

In Browsern, die Hintergrundfilter unterstützen (Safari und Chrome mit aktivierten experimentellen Funktionen) , rendert dieser Code effektiv einen unscharfen Hintergrundeffekt. Für Browser ohne Unterstützung dient es als Fallback und sorgt für einen leicht transparenten Hintergrund.

Da sich die CSS-Spezifikation für den Hintergrundfilter ständig weiterentwickelt, kann es sein, dass dieser Workaround in Zukunft angepasst werden muss. Derzeit bietet es jedoch eine kreative Möglichkeit, Benutzern auf verschiedenen Browserplattformen das gewünschte visuelle Erlebnis zu bieten.

Das obige ist der detaillierte Inhalt vonHintergrundfilter nicht verfügbar: Wie erzielt man unscharfe Hintergrundeffekte in modernen Browsern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!