Blur kaca ing mburi overlay nggunakake CSS

Yen sampeyan nggunakake elemen kayata overlay (sing dadi aturan nalika tumindak GDPR) lan pengin alus wilayah ing mburine, umpamane, sampeyan asring nemoni masalah konteks tumpukan . Contone, yen sampeyan duwe elemen sing diposisikan pancen utawa ing posisi sing tetep, dumadakan ditampilake kanthi beda tinimbang tanpa filter sing ditrapake. Nanging ana obat.


Kode ing ngisor iki nggambarake conto iki. Kothak ing latar mburi mesthine kudu dipanggonke ing sisih tengen ndhuwur, nanging dipindhah:

See the Pen CSS BLUR STACKING CONTEXT #1 by David Vielhuber (@vielhuber) on CodePen.

W3C kanthi cetha ujar: "Ora bug, nanging fitur." . Spesifikasi kasebut nerangake hubungan kasebut:

A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context. The list of functions are applied in the order provided.

Diskusi ing GitHub uga kudu dibaca.

Properti CSS ing ngisor iki nggawe konteks tumpukan anyar, supaya elemen bocah sing pancen wis utawa tetep ora tumindak maneh karo viewport, nanging kanggo elemen induk sing disaring:

  • filter
  • transform
  • backdrop-filter
  • perspective
  • contain
  • transform-style
  • will-change

Nanging ana solusi kanggo masalah asli: Backdrop-filter properti CSS (sing sejatine dikenal kanggo nyaring sebagian area ing balik unsur) nindakake apa sing dikarepake ing kene. Konteks tumpukan anyar uga digawe ing kene, nanging iki ora relevan amarga ora ana unsur bocah ing elemen semu:

See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.

Bali