CSS: Problemumgehung zum Hintergrundfilter?

backdrop-filter ist eine aktuelle CSS-Funktion, die in modernen Browsern noch nicht verfügbar ist (mindestens ab dem 1. Juli 2016).

• Chrome 51 unterstützt backdrop-filterüber das Experimental Web Platform-Flag.
• Safari 9.1 unterstützt es mit -webkit-Präfix
• Firefox 47 hat keine Unterstützung

In einem so unbrauchbaren Zustand würde ich gerne wissen, ob es einen alternativen Weg gibt, um das gleiche Ergebnis zu erzielen.

JS Abhilfen für blur, grayscale, ... sind auch willkommen

Die Entwicklung von backdrop-filterkann über https://bugs.chromium.org/p/chromium/issues/detail?id=497522 verfolgt werden

Ab Chrome M76 wird der Hintergrundfilter jetzt ohne Fixierung und ohne benötigtes Flag ausgeliefert.

https://web.dev/backdrop-filter/

Ich benutze dies, um den beliebten Milchglaseffekt zu erzielen. Bis jemand erfolgreich eine gute Polyfüllung erfindet, verwende backdrop-filterich einen leicht transparenten Hintergrund als Fallback:

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

/* if backdrop support: very transparent and blurred */
@supports ((-webkit-backdrop-filter: blur(2em)) or (backdrop-filter: blur(2em))) {
  .backdrop-blur {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
  }
}

Der Filter funktioniert in derzeit unterstützten Browsern. (Safari und Chrome mit aktivierten experimentellen Webplattformfunktionen) Der Code sollte auch in zukünftigen Browsern backdrop-filterfunktionieren, die nicht vorfixiert unterstützen, wenn sich die Spezifikation zuvor nicht ändert.

Beispiele ohne und mit Hintergrundfilterunterstützung:

Ich weiß nicht, ob Sie diese Frage noch verfolgen, aber für andere Benutzer in Zukunft:

Dieser Effekt kann mit CSS-Pseudoklassen wie folgt erreicht werden, es ist kein JavaScript erforderlich! unten gezeigt:

body,
main::before {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/tree.jpg) 0 / cover fixed;
}

main {
  margin: 100px auto;
  position: relative;
  padding: 10px 5px;
  background: hsla(0, 0%, 100%, .3);
  font-size: 20px;
  font-family: 'Lora', serif;
  line-height: 1.5;
  border-radius: 10px;
  width: 60%;
  box-shadow: 5px 3px 30px black;
  overflow: hidden;
}

main::before {
  content: '';
  margin: -35px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  filter: blur(20px);
  z-index: -1;
}

<main>
  <blockquote>"The more often we see the things around us &#45; even the beautiful and wonderful things &#45; the more they become invisible to us. That is why we often take for granted the beauty of this world: the flowers, the trees, the birds, the clouds &#45;
    even those we love. Because we see things so often, we see them less and less."
    <footer>&mdash;
      <cite>
        Joseph B. Wirthlin
      </cite>
    </footer>
  </blockquote>
</main>

Ein Live-Beispiel finden Sie auf Codepen: https://codepen.io/jonitrythall/pen/GJQBOp

Schnelle Notiz:

Abhängig von der Struktur Ihres HTML-Dokuments können sich Ihre Z-Indizes von den im Beispiel beschriebenen unterscheiden.

Verwenden Sie SVG-Filter. Sie wirken wie ein Zauber. Kasse dieses Beispiel CodePen .

backdrop-filterwird jetzt standardmäßig in Chrome Canary unterstützt. Es ist auch in der Prioritätenliste 2019 für die Firefox-Entwicklung. Es wird also bald in allen Browsern unterstützt, aber im Moment können Sie SVG-Filter verwenden.

Aktualisieren

SVG-Filter funktionieren nicht genau so backdrop-filter. Es ist nur eine Problemumgehung und es funktioniert nicht, wenn sich darunter bewegliche Elemente befinden. Wie auch immer, ich denke, wir werden backdrop-filtersehr bald in der Produktion sein können . Es ist jetzt standardmäßig in Chrome Beta aktiviert! Was auch Edge bedeutet.

Sie können versuchen, den Hintergrundbildern verschiedene Filter hinzuzufügen:

https://css-tricks.com/almanac/properties/f/filter/

Der Nachteil dabei ist, dass es nur bei Bildern funktioniert.

Grundsätzlich gibt es 10 integrierte Filter für die CSS- filterEigenschaft:

• Unschärfe (px)
• Helligkeit(%)
• Kontrast(%)
• Schlagschatten (H-Schatten V-Schatten Unschärfe Ausbreitungsfarbe)
• Graustufen (%)
• Farbton drehen (Grad)
• umkehren(%)
• Opazität(%)
• sättigen(%)
• Sepia(%)

Außerdem können Sie eine URL angeben, die eine XML-Datei mit dem entsprechenden Filter enthält.