كيف يمكنني طمس المحتوى وراء div في HTML / CSS (اقرأ التفاصيل)؟


الاجابه 1:

هل تريد طمس الخلفية وراء div؟

نفس التأثير الذي تقدمت به لتطبيق الويب الذي أنشأته والذي كان

استنساخ انستغرام

مع النكهات والسمات الخاصة بي:

yTakkar / استنساخ Instagram

المحلول:

الهيكل هو:

  1. // غلاف // الأطفال // الأطفال // الأطفال // لهذا التراكب المظلم الذي يغطي الشاشة // div الموجود في الأعلى

هناك قسم مجمّع يلف جميع العناصر خلف مربع البحث والشعار والعنوان والشريط الجانبي وما إلى ذلك.

لذا قم أولاً بطمس الغلاف

  1. .wrapper {filter: blur (2px)؛}

مع كل هذه العناصر سيتم تعتيمها تلقائيًا !!

ثم يكون قسم التراكب مسؤولًا عن هذا التأثير المظلم الذي يجعل واجهة المستخدم تبدو جيدة ولديها أنماط لتحقيق ذلك:

  1. .overlay {الموضع: ثابت ؛ أعلى: 0 ؛ اليسار: 0 ؛ يمين: 0 ؛ أسفل: 0 ؛ العرض: 100٪ ؛ الارتفاع: 100٪ ؛ الخلفية: # 000؛ التعتيم: .5 ؛ مؤشر z: 1؛}

ثم أخيرًا أصبح لدى div modal أنماط لتكون في القمة:

  1. .modal {z-index: 2؛}

لم تحصل على نظرة على المستودع في جيثب.

yTakkar / استنساخ Instagram


الاجابه 2:

قد تكون هناك طرق أخرى

ولكن هذا ما أفعله دائمًا

1.إنشاء div يغطي الصفحة بأكملها وتغيير تعتيمها

لجعلها ضبابية

2.إنشاء div آخر (مربع صغير) ووضعه فوق div السابق باستخدام مؤشر z

وقم بمحاذاة وسط الصفحة

3. أدخل المحتوى المحتوى في المربع الصغير


الاجابه 3:

لن أعطيك الإجراء بالكامل ، ولكن فقط فكرة.

تحتاج إلى تطبيق تعديل الصور ، قد يكون Photoshop مثاليًا. لقد قمت للتو بإنشاء ملف PNG بشفافية كاملة. يعني حذف كل شيء مع ممحاة ، وبالتالي سيكون شفافًا.

الآن طمس تلك الصورة.حافظ على مستوى التعتيم كما تريد في الويب الخاص بك. البنغو. حفظ هذه الصورة باستخدام

anyName.png

ثم احتفظ بهذه الصورة كخلفية في

شعبة

بطاقة شعار. هذا هو.

الآن عندما تفتح تلك العلامة ، تكون صورة الخلفية ضبابية شفافة ، وبالتالي ستبدو الخلفية الأساسية ضبابية.


الاجابه 4:

قد تكون هناك طرق أخرى

ولكن هذا ما أفعله دائمًا

1.إنشاء div يغطي الصفحة بأكملها وتغيير تعتيمها

لجعلها ضبابية

2.إنشاء div آخر (مربع صغير) ووضعه فوق div السابق باستخدام مؤشر z

وقم بمحاذاة وسط الصفحة

3. أدخل المحتوى المحتوى في المربع الصغير