Încețoșați pagina din spatele suprapunerii folosind CSS

Dacă utilizați elemente precum suprapuneri (care este regula în acționismul GDPR) și doriți să înmuiați zona din spatele suprapunerii, de exemplu, întâlniți adesea problema contextului de stivuire . De exemplu, dacă aveți elemente poziționate absolut sau într-o poziție fixă, acestea sunt afișate brusc diferit decât fără un filtru aplicat. Dar există un remediu.


Următorul cod ilustrează acest exemplu. Caseta din fundal ar trebui să fie de fapt poziționată în partea dreaptă sus, dar este mutată:

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

W3C spune clar: „Nu este un bug, este o caracteristică”. . Specificația explică relația:

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.

Discuția de pe GitHub merită, de asemenea, citită.

Următoarele proprietăți CSS creează un nou context de stivuire, astfel încât elementele copil poziționate absolut sau fix nu se mai comportă în raport cu fereastra de vizualizare, ci cu elementul părinte filtrat:

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

Dar există o soluție la problema inițială: filtrul de fundal al proprietății CSS (care este de fapt cunoscut pentru filtrarea parțială a zonelor din spatele elementelor) face ceea ce ne dorim aici. Un nou context de stivuire este, de asemenea, generat aici, dar acest lucru este irelevant, deoarece nu există elemente copil în pseudo-element:

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

Înapoi