تمويه CSS على صورة الخلفية مع الحفاظ على وضوح المحتوى

في محاولة لتعتيم صورة الخلفية في إعداد CSS، من الشائع أن تواجه المشكلة التي يصبح فيها المحتوى (النص أو العناصر الأخرى) غير واضح أيضًا. هذا هو المكان الذي يلعب فيه مفهوم الفهرس z والعناصر الزائفة.

لتعتيم صورة الخلفية دون التأثير على المحتوى، يمكن استخدام النهج التالي:

1. إنشاء حاوية للخلفية: قم بتضمين صورة الخلفية داخل div أو حاوية أخرى وقم بتعيين فئة لها، مثل "blur-bgimage."
2. تقديم عنصر زائف: ضمن فئة "blur-bgimage"، أضف فئة زائفة مثل:before. يؤدي هذا إلى إنشاء طبقة خلف الحاوية التي ترث صورة الخلفية.
3. تمويه الخلفية: قم بتطبيق تأثير التمويه على العنصر الزائف باستخدام مرشحات CSS. سيؤدي هذا إلى طمس صورة الخلفية الموروثة دون التأثير على المحتوى.
4. تراكب المحتوى: ضع المحتوى داخل حاوية "blur-bgimage"، مع التأكد من أنه يحتوي على مؤشر z أعلى (على سبيل المثال. ، z-index: 1) من الخلفية غير الواضحة (z-index: 0).

فيما يلي رمز مثال:

.blur-bgimage {
    overflow: hidden;
    margin: 0;
    text-align: left;
}
.blur-bgimage:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    z-index: -1;

    filter: blur(10px);
    -moz-filter: blur(10px);
    -webkit-filter: blur(10px);
    -o-filter: blur(10px);

    transition: all 2s linear;
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    -o-transition: all 2s linear;
}

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