اگر مثلاً از عناصری مانند همپوشانی (که در زمان اقدام گرایی GDPR این قانون است) استفاده می کنید و می خواهید ناحیه پشت همپوشانی را نرم کنید ، اغلب با مشکل زمینه جمع شدن روبرو می شوید . به عنوان مثال ، اگر عناصری را به طور کامل یا در یک موقعیت ثابت قرار دهید ، ناگهان متفاوت از فیلتر بدون نمایشگر نمایش داده می شوند. اما یک راه حل وجود دارد.
کد زیر این مثال را نشان می دهد. جعبه در پس زمینه باید در واقع در سمت راست بالا قرار داشته باشد ، اما منتقل شده است:
See the Pen CSS BLUR STACKING CONTEXT #1 by David Vielhuber (@vielhuber) on CodePen.
W3C در اینجا به وضوح می گوید: "این یک اشکال نیست، یک ویژگی است." مشخصات اتصال را توضیح می دهد:
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.
بحث در مورد GitHub نیز خواندنی است.
خصوصیات CSS زیر یک زمینه انباشته جدید ایجاد می کند ، به طوری که عناصر کودک کاملاً یا ثابت قرار گرفته دیگر نسبت به منظره نمایش رفتار نمی کنند بلکه با عنصر والد فیلتر شده رفتار می کنند:
- filter
- transform
- backdrop-filter
- perspective
- contain
- transform-style
- will-change
اما یک راه حل برای مشکل اصلی وجود دارد: ویژگی CSS پس زمینه فیلتر (که در واقع برای فیلتر کردن قسمت های پشت عناصر شناخته شده است) کار مورد نظر را در اینجا انجام می دهد. اگرچه یک زمینه انباشته جدید نیز در اینجا ایجاد می شود، اما بی ربط است زیرا هیچ عنصر فرزندی در شبه عنصر وجود ندارد.:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.