Blur ka ʻaoʻao ma hope o ka uhi ka hoʻohana ʻana iā CSS

Inā ʻoe e hoʻohana i nā mea e like me ka overlay (ʻo ia ka lula i nā manawa o ka hana GDPR) a makemake e palupalu i kahi ma hope o ka uhi, no ka laʻana, ʻike pinepine ʻoe i ka pilikia o ka pōʻaiapili . ʻO kahi laʻana, inā he mau hoʻonohonoho kāu i hoʻonohonoho ʻia a i ʻole i kahi kūlana paʻa, e hōʻike ʻokoʻa ʻia lākou ma mua o ka ʻole o kahi kānana noi. Akā aia kekahi lāʻau.


Hōʻike kēia code i kēia laʻana. Pono e hoʻonohonoho i ka pahu ma hope i ka pono ma luna, akā ua neʻe:

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

Ua ʻōlelo akāka ka W3C: "ʻAʻole ia he kolo, he hiʻohiʻona ia." . Hoʻomaopopo ka wehewehe i ka pilina:

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.

ʻO ka kūkā kamaʻilio e pili ana iā GitHub he mea pono nō hoʻi e heluhelu.

Hoʻokumu nā waiwai CSS aʻe i kahi pōʻaiapili hou, i kū ʻole a paʻa paʻa paha nā keiki i nā ʻano o ka viewport, akā i ka mea makua i kānana ʻia.:

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

Akā aia kahi hopena i ka pilikia kumu: ʻO ka CSS backdrop-filter (kahi ʻike maoli ʻia no nā wahi kānana hapa ma hope o nā mea) hana i kā mākou makemake ma aneʻi. Ua haku ʻia kahi pōʻaiapili hou ma aneʻi, akā pili ʻole kēia no ka mea ʻaʻohe mea keiki i ka pseudo-element:

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

Hope