CSS Academy · درس

لون الخلفية وصورتها

طبّق ألوان الخلفية والصور باستخدام الخاصيتين background-color وbackground-image.

لون الخلفية وصورتها درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

background-color

تحدّد الخاصية background-color لونًا مصمتًا خلف العنصر. وهي تقبل أي قيمة لون في CSS، وتظهر من خلال المناطق الشفافة في صور الخلفية.

<div class="hero">Hero section</div>

background-image

تعيّن background-image صورة واحدة أو أكثر لتكون خلفية العنصر. وتظهر الصور فوق background-color.

<div class="banner">Banner (image missing &rarr; fallback color shows)</div>

background-size

تتحكم background-size في أبعاد الصورة. ومن القيم الأساسية:

cover — تملأ المساحة، مع اقتصاص الصورة عند الحاجة
contain — تلائم الصورة داخل المساحة بالكامل، وقد تترك فراغات
100% 100% — تمدد الصورة لملء المساحة تمامًا

<div class="hero"></div>

background-position

تحدّد background-position موضع الصورة. استخدموا الكلمات المفتاحية أو قيم النسب المئوية أو الأطوال.

<div class="hero"></div>

background-repeat

تتكرر الصور على شكل مربعات افتراضيًا. تحكموا في هذا التكرار باستخدام background-repeat:

<div class="hero"></div>
  <div class="pattern"></div>

background-attachment

تحدّد background-attachment ما إذا كانت الصورة تتحرك مع الصفحة أثناء التمرير. تنشئ القيمة fixed تأثيرًا شبيهًا بالمنظر المتحرك، بينما تكون scroll هي القيمة الافتراضية.

<div class="spacer">Scroll down &darr;</div>
  <div class="parallax">Fixed background</div>
  <div class="spacer">Scroll up &uarr;</div>

خلفيات متعددة

يدعم CSS طبقات خلفية متعددة مفصولة بفواصل. وتظهر الطبقة الأولى المذكورة في الأعلى.

<div class="card">Overlay + photo layers</div>

الاختصار background

يجمع الاختصار background جميع خصائص الخلفية في تصريح واحد. يهم ترتيب القيم بالنسبة إلى الحجم: اكتبوا الحجم بعد الموضع، وافصلوا بينهما بالرمز /.

<div class="hero"></div>

قص الخلفية وأصلها

تتحكم background-clip في موضع رسم الخلفية بالنسبة إلى نموذج الصندوق. وتحدّد background-origin النقطة المرجعية لتحديد الموضع.

<div class="card">Clip &amp; Origin</div>

قص الخلفية وفق النص

استخدموا background-clip: text مع لون نص شفاف لقص صورة الخلفية أو التدرج اللوني وفق شكل النص.

<h1>Gradient Text</h1>

object-fit مع <img> مقابل background-image

بالنسبة إلى وسوم <img>، استخدموا object-fit: cover وobject-position بدلًا من background-image. يحافظ ذلك على وجود الصور في DOM لتحسين إمكانية الوصول وSEO.

<img class="hero-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='800'><rect width='400' height='800' fill='%23ff6347'/><circle cx='200' cy='200' r='150' fill='%231e90ff'/></svg>" alt="hero" />

تحقق سريع

أي قيمة من قيم background-size تملأ المساحة وتقص الصورة بدلًا من ترك فراغات؟

مراجعة

استخدموا background-color كخلفية احتياطية أسفل الصور. وتُعد background-size: cover الخيار المعتاد لصور الواجهة الرئيسية الممتدة بالكامل. تمنحكم طبقات الخلفية المتعددة قدرة أكبر على تركيب العناصر. كما يجمع الاختصار جميع خصائص الخلفية بإيجاز.

الأسئلة الشائعة

هل درس «لون الخلفية وصورتها» مجاني؟

نعم — نص درس «لون الخلفية وصورتها» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «لون الخلفية وصورتها»؟

طبّق ألوان الخلفية والصور باستخدام الخاصيتين background-color وbackground-image. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «لون الخلفية وصورتها»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy