Background-Filter plötzlich nicht wirksam

[Gunnar Bittersmann]

@@Killua

Folgendes habe ich gemacht und es funzte auch:

body  {
    background-image: url(bild.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    backdrop-filter: blur(10px);
    background-blend-mode: luminosity;
}

Du hast nicht richtig getestet. Das funktioniert nicht im Firefox. Es geht im Fuchs aber ohne background-blend-mode: luminosity. Wozu denkst du das zu brauchen?

Es funktioniert auch nicht im Safari; der braucht das noch mit Präfix: -webkit-backdrop-filter: blur(10px).

dann entschied ich mich, diesen Hintergrund nur für den DIV .header alleine zu verwenden - auch das klappte samt allen Filtern:

.header  {
    background-image: url(bild.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    backdrop-filter: blur(10px);
    background-blend-mode: luminosity;
}

Doch irgendwann waren die Filtereffekte im Header weg!

Can I Use listet die backdrop-filter-Eigenschaft noch als UNOFF(icial). Die Spezifikation ist im Status Editor’s Draft. Da kann sich durchaus noch was ändern, sei es in der Spec oder in den Implementierungen in Browsern.

Nach vielen erfoglosen Versuchen wandte ich dies wieder auf den Body an - das klappt weiterhin!

Aber auch nur solange, wie du html keinen nicht völlig transparenten Hintergrund gibst.

Wieso werden nur die Background-Filter nur bei dem DIV .header nicht mehr angewandt?

Sie werden angewandt, wenn du body (oder html) das Hintergrundbild gibst und dem div den Filter.

☞ Spielwiese

🖖 Живіть довго і процвітайте