Se vi uzas elementojn kiel surmetaĵojn (kio estas la regulo en tempoj de GDPR-agado) kaj volas mildigi la areon malantaŭ la surmetaĵo, ekzemple, vi ofte renkontas la problemon de la staka kunteksto . Ekzemple, se vi havas elementojn poziciigitaj absolute aŭ en fiksa pozicio, ili subite montriĝos malsame ol sen aplikita filtrilo. Sed estas rimedo.
La sekva kodo ilustras ĉi tiun ekzemplon. La skatolo en la fono efektive estu poziciigita supre dekstre, sed ĝi estas movita:
See the Pen CSS BLUR STACKING CONTEXT #1 by David Vielhuber (@vielhuber) on CodePen.
La W3C klare diras: "Ĝi ne estas cimo, ĝi estas trajto." . La specifo klarigas la rilaton:
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.
La diskuto pri GitHub ankaŭ estas leginda.
La jenaj CSS-ecoj kreas novan stakigan kuntekston, tiel ke absolute aŭ fikse poziciigitaj infanaj elementoj ne plu kondutas rilate al la vidujo, sed prefere al la filtrita gepatra elemento:
- filter
- transform
- backdrop-filter
- perspective
- contain
- transform-style
- will-change
Sed ekzistas solvo al la originala problemo: La CSS-poseda fonfiltrilo (kiu fakte estas konata pro parte filtri areojn malantaŭ elementoj) faras tion, kion ni volas ĉi tie. Nova staka kunteksto ankaŭ estas kreita ĉi tie, sed ĉi tio estas senrilata ĉar ne ekzistas infanaj elementoj en la pseŭdo-elemento:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.