Wie erstelle ich mit CSS einen Hintergrundunschärfeeffekt, auch in älteren Browsern?

CSS: Hintergrundfilter-Polyfüllung

Hintergrundfilter, eine CSS-Funktion, die Unschärfe und andere Effekte auf dem Hintergrund eines Elements ermöglicht, bleibt bestehen wird in modernen Browsern weitgehend nicht unterstützt. Erwägen Sie alternativ die Verwendung eines leicht transparenten Hintergrunds als Fallback:

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

@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 bietet einen transparenten Fallback für Browser ohne Unterstützung für Hintergrundfilter und ermöglicht gleichzeitig einen Unschärfeeffekt in unterstützten Browsern. Das CSS ermöglicht auch zukünftige CSS-Revisionen, die möglicherweise Unterstützung für Hintergrundfilter ohne Präfix einführen.

Visualisierung:

[Bild eines transparenten Fallbacks ohne Unterstützung für Hintergrundfilter] [Bild Unschärfeeffekt mit Unterstützung für Hintergrundfilter]

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS einen Hintergrundunschärfeeffekt, auch in älteren Browsern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!