تعتيم الخلفيات باستخدام CSS: تجنب طمس المحتوى

يمكن للخلفيات غير الواضحة أن تعزز جماليات موقع الويب وتركيز الاهتمام على المحتوى الرئيسي. ولكن ماذا لو أثر التمويه عن غير قصد على المحتوى نفسه؟

في هذا المثال، جرت محاولة لتعتيم صورة الخلفية مع الحفاظ على وضوح النص الأمامي داخل عنصر الامتداد. ولتحقيق ذلك، يمكن استخدام CSS بشكل استراتيجي.

تتضمن التقنية الرئيسية استخدام الفئة الزائفة :before لوراثة صورة الخلفية. تم تقديم عنصر div جديد بالفئة "blur-bgimage"، وإضافة فئة زائفة: قبل. يرث هذا العنصر الزائف صورة الخلفية باستخدام خاصية الخلفية: وراثة.

بعد ذلك، يتم تعتيم العنصر الزائف :before بشكل فعال باستخدام مرشحات CSS. من خلال دمج هذه المرشحات (تمويه (10 بكسل) في هذه الحالة)، يتم إعطاء صورة الخلفية تأثير التمويه المطلوب.

يتم بعد ذلك تعيين تجاوز لـ div ".blur-bgimage": مخفي لإخفاء المنطقة غير الواضحة خلفها. حدود div. يتم أيضًا تعيين الهامش ومحاذاة النص ومؤشر z بشكل مناسب.

لتبديل تأثير التمويه، يمكن استخدام JavaScript لإضافة أو إزالة فئة ".blur-bgimage"، كما هو موضح في مثال jsfiddle المقدم . باستخدام هذه الطريقة، يمكن التحكم في تأثير طمس الخلفية ديناميكيًا دون المساس بوضوح المحتوى.