اگر مثلاً از عناصری مانند همپوشانی (که در زمان اقدام گرایی 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
اما یک راه حل برای مسئله اصلی وجود دارد: فیلتر backdrop خاصیت CSS (که در واقع برای فیلتر کردن بخشی از مناطق پشت عناصر شناخته شده است) آنچه را که می خواهیم در اینجا انجام می دهد. یک زمینه انباشته جدید نیز در اینجا ایجاد شده است ، اما این بی ربط است زیرا هیچ عنصر کودک در عنصر شبه وجود ندارد:
See the Pen CSS BLUR STACKING CONTEXT #2 by David Vielhuber (@vielhuber) on CodePen.