السلام عليكم , مشكلتي أن خلفية ال overlay لم تستجيب علماً كتابة الكود صحيحة.

صقر عمار · 26 أبريل

Ali Ibrahim12 · 27 أبريل

هنالك خطأ بسيط في ملف الcss لتنسيق الـoverlay حيث يجب إضافة to قبل الاتجاه كما يلي:

header .overlay {
  background-image: linear-gradient(to top right, rgba(46,178,181,0.8), rgba(197,203,50, 0.8));
  min-height: 100vh;
}

كما أنصح بتحديد الposition للoverlay لتحديد أين سيظهر في حال كنت تريد وضعه فوق الصورة مثلاً :

header .overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to top right, rgba(46,178,181,0.8), rgba(197,203,50, 0.8));
  min-height: 100vh;
}

فتظهر بهذا الشكل اذا كان ذلك ما تريده:

ياسر مسكين · 27 أبريل

لكي يعمل التأثير بشكل جيد يجب أن تتأكد من صحة المسارات التي في ملف html الخاص بك وبالضبط في جزء ال header فقد وضعت التنسيقات في ملف style.css في نفس المجلد، بينما تقوم باستيراده على أساس أنه في مجلد آخر تحت اسم css لهذا يجب أن تعدله بهذا الشكل:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
...
  <link rel="stylesheet" href="style.css">
  <title>الشركة</title>
</head>

كما أنك لم تقم بإرفاق الصور ومجلد الصور وسيحصل مشكلة في ذلك، ففي حالة ما كان هنالك مجلد باسم images بالفعل فلا بأس وسيقوم بتوليد الشعار وأي صور تضعها داخله أما في حالة ما كانت الصورة في نفس جذر المشروع فيجب أن تغير الاستيراد لهذا الشكل:

<img src="images/logo.png" alt="logo">

Adnane Kadri · 27 أبريل

ضف بعض التنسيقات الأخرى لطبقة overlay لكي يمكنها التموضع بصورة صحيحة.

أعطها عرضا كاملا واجعلها تتموضع بشكل absolute داخل حاويتها:

header .overlay {
  background-image: linear-gradient(top right, rgba(46,178,181,0.8), rgba(197,203,50, 0.8));
  min-height: 100vh;
  min-width: 100vw;
  position: absolute;
  top: 0;
  right: 0;
}

طبعا لا تنسى اعطاء وضعية relative للحاوية المباشرة لها:

header{
   position: relative;
}

السلام عليكم , مشكلتي أن خلفية ال overlay لم تستجيب علماً كتابة الكود صحيحة.

السؤال

صقر عمار

رابط هذا التعليق

شارك على الشبكات الإجتماعية

3 أجوبة على هذا السؤال

Recommended Posts

Ali Ibrahim12

رابط هذا التعليق

شارك على الشبكات الإجتماعية

ياسر مسكين

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Adnane Kadri

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية