Wie erzielt man einen verschwommenen Glaseffekt, ohne auf einen „Hintergrundfilter' angewiesen zu sein?

Eine verschwommene Alternative zum schwer fassbaren Hintergrundfilter von CSS

Trotz seiner fesselnden Wirkung bleibt der Hintergrundfilter von CSS schwer fassbar, mit eingeschränkter Browserunterstützung (Stand 1. Juli 2016). Während wir sehnsüchtig auf die vollständige Implementierung warten, wollen wir einen Workaround erkunden, der uns dem gewünschten unscharfen Glaseffekt näher bringen kann.

Ein transparenter Fallback

Für Browser, die keine Unterstützung für Hintergrundfilter haben, ein wenig Ein transparenter Hintergrund kann den Milchglaseffekt nachahmen. Der folgende Code bietet einen einfachen Fallback:

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

Nutzung der Browser-Unterstützung

Für Browser, die den Hintergrundfilter unterstützen, können wir dessen Unschärfefunktionen nutzen. Hier ist eine erweiterte Version des CSS-Codes, die auf dieses Szenario zugeschnitten ist:

<code class="css">/* 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>

Dieser Code stellt sicher, dass der Unschärfeeffekt in unterstützten Browsern angewendet wird, während der transparente Fallback für diejenigen, die dies nicht tun, ordnungsgemäß beeinträchtigt wird.

Beispiele: Die Unschärfe in Aktion sehen

Ohne Hintergrundfilterunterstützung wird das Element mit einem leicht transparenten Hintergrund angezeigt, wie im folgenden Bild dargestellt:

[Bild einfügen von transparenter Fallback-Effekt]

Mit der Unterstützung von Hintergrundfiltern setzt sich der unscharfe Glaseffekt durch, wie im folgenden Bild dargestellt:

[Bild des unscharfen Effekts einfügen]

Fazit

Die hier vorgestellte Hintergrundfilter-Problemumgehung bietet eine praktische Lösung zum Erzielen eines unscharfen Glaseffekts auf Webelementen, unabhängig von der Browserunterstützung. Obwohl wir davon ausgehen, dass der Hintergrundfilter in Zukunft vollständig verfügbar sein wird, bietet diese Technik eine wertvolle Alternative zur Verbesserung des Benutzererlebnisses.

Das obige ist der detaillierte Inhalt vonWie erzielt man einen verschwommenen Glaseffekt, ohne auf einen „Hintergrundfilter' angewiesen zu sein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!