Vervaag de pagina achter de overlay met CSS

Als je elementen zoals overlays gebruikt (wat de regel is in tijden van GDPR-actionisme) en bijvoorbeeld het gebied achter de overlay wilt verzachten, kom je vaak het probleem van de stapelcontext tegen . Als u bijvoorbeeld elementen absoluut of in een vaste positie heeft gepositioneerd, worden ze ineens anders weergegeven dan zonder filter. Maar er is een remedie.


De volgende code illustreert dit voorbeeld. Het vak op de achtergrond zou eigenlijk rechtsboven moeten staan, maar het is verplaatst:

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

Het W3C zegt duidelijk: "Het is geen bug, het is een feature." . De specificatie legt de relatie uit:

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.

De discussie op GitHub is ook het lezen waard.

De volgende CSS-eigenschappen creëren een nieuwe stapelcontext, zodat absoluut of vast gepositioneerde onderliggende elementen zich niet langer gedragen ten opzichte van de viewport, maar eerder ten opzichte van het gefilterde bovenliggende element:

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

Maar er is een oplossing voor het oorspronkelijke probleem: de CSS-eigenschap backdrop-filter (die eigenlijk bekend staat om het gedeeltelijk filteren van gebieden achter elementen) doet hier wat we willen. Hier wordt ook een nieuwe stapelcontext gegenereerd, maar dit is niet relevant aangezien er geen onderliggende elementen in het pseudo-element zijn:

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

Terug