Wie emuliere ich einen CSS-Hintergrundfilter in Browsern ohne native Unterstützung?

Problemumgehung für den CSS-Hintergrundfilter

Trotz seines Versprechens bleibt der CSS-Hintergrundfilter eine schwer fassbare Funktion in modernen Browsern. Da Chrome 51 über sein Flag „Experimental Web Platform“ begrenzte Unterstützung bietet und Safari 9.1 die Verwendung des Präfixes „-webkit-“ erfordert, bleibt seine Praktikabilität fraglich. Glücklicherweise gibt es Workarounds, die die gewünschten Effekte auch dann nachahmen können, wenn keine native Unterstützung für Hintergrundfilter vorhanden ist.

Ein vielversprechender Ansatz besteht darin, einen leicht transparenten Hintergrund als Ausweichlösung zu verwenden. Wenn der Hintergrundfilter nicht verfügbar ist, bietet dieser transparente Hintergrund eine diskrete und mischbare Lösung.

Bei Browsern, die den Hintergrundfilter unterstützen, kann der Code den Effekt jedoch verstärken, indem er die Transparenz des Hintergrunds weiter reduziert und eine anwendet Unschärfefilter. Diese Kombination ahmt effektiv das Verhalten des Hintergrundfilters nach.

Um diese Problemumgehung zu implementieren, verwenden Sie einfach den folgenden Code:

<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>

Diese Lösung bietet browserübergreifende Kompatibilität und bietet ein konsistentes visuelles Erlebnis unabhängig davon, ob der Browser den Hintergrundfilter unterstützt. Es enthält auch Beispiele zur Veranschaulichung des Fallback-Effekts und des erweiterten Effekts mit Hintergrundfilter-Unterstützung.

Das obige ist der detaillierte Inhalt vonWie emuliere ich einen CSS-Hintergrundfilter in Browsern ohne native Unterstützung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!