.png)
شرح درس الخلفيات Css
الخلفيات (Background)
إذا كانت عناصر HTML هي "الممثلين" على المسرح، فإن الـ Background هي "الديكور" الخلفي الذي يحدد جو المشهد. الخلفيات في CSS لم تعد مجرد لون مصمت أو صورة تتكرر بشكل ممل كما في التسعينات. اليوم، الخلفيات هي أداة قوية جداً تمكنك من صنع تدرجات لونية ساحرة (Gradients)، وضع صور تغطي الشاشة بالكامل بذكاء (Responsive)، وحتى عمل خدع بصرية مثل التمرير الثابت (Parallax Effect).
في هذا الدرس العميق، سنقوم بتفكيك خاصية background إلى جزيئاتها الأولية. سنتعلم كيف نتحكم في موقع الصورة، حجمها، تكرارها، وكيف نضع أكثر من خلفية فوق بعضهم البعض. استعد لدرس سيغير نظرتك لتصميم المواقع.
1. اللون الخلفي (background-color)
أبسط وأول خاصية هي ملء العنصر بلون مصمت. هذه الخاصية تغطي منطقة المحتوى (Content) ومنطقة الحاشية (Padding) وحتى حدود الإطار (Border) إذا كانت الحدود شفافة أو منقطة.
القيم المقبولة
- أسماء الألوان:
red,blue. - أكواد Hex:
#ff0000. - أكواد RGB/RGBA: وهنا تكمن القوة. باستخدام
rgbaيمكنك جعل الخلفية نصف شفافة لتظهر ما خلفها. - transparent: (الافتراضي) تجعل الخلفية شفافة تماماً.
body {
background-color: #f0f0f0; /* رمادي فاتح للصفحة كلها */
}
.overlay-box {
/* لون أسود بنسبة شفافية 50% */
/* هذا سيجعل الصندوق مظللاً لكن يظهر ما خلفه */
background-color: rgba(0, 0, 0, 0.5);
color: white;
}
2. الصورة الخلفية (background-image) والتدرجات
هنا يبدأ المرح. هذه الخاصية تسمح لك بوضع صورة، أو رسم تدرج لوني (Gradient) لأن المتصفح يعتبر التدرج "صورة" يتم توليدها برمجياً.
أ. وضع صورة (URL)
نستخدم الدالة url('...') لتحديد مسار الصورة. المسار يمكن أن يكون على جهازك (محلي) أو رابطاً من الإنترنت.
background-image: url('images/hero.jpg');
ب. التدرجات اللونية (Gradients) - تصميم بلا صور!
بدلاً من تحميل صورة ثقيلة، يمكنك جعل المتصفح يرسم تدرجاً لونياً. هناك نوعان رئيسيان:
- Linear Gradient (خطي): تدرج في خط مستقيم (من فوق لتحت، أو بزاوية).
background-image: linear-gradient(to right, red, yellow); - Radial Gradient (دائري): تدرج يبدأ من المنتصف وينتشر للخارج بشكل دائري.
background-image: radial-gradient(circle, red, black);
.hero-section {
height: 300px;
/* تدرج من الأزرق الغامق إلى البنفسجي بزاوية 45 درجة */
background-image: linear-gradient(45deg, #1e3c72, #2a5298);
}
3. تكرار الخلفية (background-repeat)
افتراضياً، إذا كانت الصورة أصغر من العنصر، سيقوم المتصفح بتكرارها (Tiling) أفقياً وعمودياً لتملأ المكان، مثل بلاط الأرضية. غالباً ما يكون هذا مزعجاً ونريد إيقافه.
خيارات التكرار
| القيمة | السلوك |
|---|---|
repeat |
(الافتراضي) تكرار الصورة في كل الاتجاهات. |
no-repeat |
(الأكثر استخداماً) تظهر الصورة مرة واحدة فقط ولا تتكرر. |
repeat-x |
تكرار أفقي فقط (شريط بالعرض). |
repeat-y |
تكرار عمودي فقط (شريط بالطول). |
4. مكان الخلفية (background-position)
عندما توقف التكرار (no-repeat)، أين ستظهر الصورة؟ افتراضياً تظهر في الزاوية العلوية اليسرى (0,0). خاصية background-position تسمح لك بتحريكها بدقة.
طرق تحديد الموقع
- الكلمات المفتاحية: (الأسهل)
center,top,bottom,left,right.
مثال:background-position: center center;(في منتصف العنصر تماماً). - النسب المئوية:
50% 50%(تعني المنتصف).100% 100%(أسفل اليمين). - وحدات البكسل:
20px 50px(ابعد 20 بيكسل من اليسار، و 50 بيكسل من فوق).
5. حجم الخلفية (background-size) - الأهم للتجاوب
هذه هي أهم خاصية في تصميم المواقع الحديثة (Responsive Design). كيف تجعل الصورة تغطي كامل الشاشة سواء على الموبايل أو الكمبيوتر دون أن تتشوه؟
القيم السحرية (Cover vs Contain)
| القيمة | الوصف والنتيجة |
|---|---|
auto |
الحجم الطبيعي للصورة (قد تكون ضخمة جداً أو صغيرة جداً). |
cover |
(الخيار السحري) تقوم بتكبير الصورة لتغطي كامل العنصر.
العيب: قد يتم قص أجزاء من الصورة (من الجوانب أو فوق/تحت) للحفاظ على النسبة. |
contain |
تقوم بتكبير الصورة لتظهر بالكامل داخل العنصر.
العيب: قد تترك مساحات فارغة في الجوانب إذا كانت أبعاد الصورة لا تطابق العنصر. |
100% 100% |
تجبر الصورة على ملء العنصر بالكامل.
العيب: تشوه الصورة (تمطيط) وتفقد أبعادها الحقيقية. |
.full-screen-bg {
width: 100%;
height: 100vh; /* ملء ارتفاع الشاشة */
background-image: url('landscape.jpg');
background-repeat: no-repeat;
background-position: center;
/* السر هنا: تغطية كاملة دون تشويه */
background-size: cover;
}
6. تثبيت الخلفية (background-attachment)
هل رأيت تلك المواقع التي تتحرك فيها النصوص بينما تبقى الصورة الخلفية ثابتة في مكانها وكأنها نافذة؟ هذا هو تأثير Parallax البسيط، ويتم صنعه بكلمة واحدة.
قيم التثبيت
scroll: (الافتراضي) الخلفية تتحرك وتختفي مع حركة الصفحة عند النزول (Scroll).fixed: الخلفية "تتجمد" في مكانها بالنسبة للشاشة. المحتوى يتحرك فوقها، لكنها لا تتحرك.local: تستخدم عند وجود شريط تمرير داخل العنصر نفسه (div scrollable).
معلومة: استخدام background-attachment: fixed مع background-size: cover هو أسهل طريقة لعمل تأثير Parallax احترافي بدون أي جافاسكريبت.
7. مناطق الرسم والقص (Origin & Clip)
هاتان خاصيتان للمحترفين، تتحكمان في "أين تبدأ الخلفية" و "أين يتم قصها".
أ. منشأ الخلفية (background-origin)
تحدد من أين تبدأ الصورة (نقطة 0,0):
border-box: تبدأ من أقصى الزاوية (خلف الإطار).padding-box: (الافتراضي) تبدأ من داخل الإطار (منطقة الحاشية).content-box: تبدأ من منطقة المحتوى فقط.
ب. قص الخلفية (background-clip) - خدعة النص الملون
تحدد المنطقة التي سيتم "دهان" الخلفية فيها. أهم قيمة هنا هي text.
خدعة رائعة: يمكنك وضع صورة داخل النصوص! اجعل الخلفية صورة، ثم استخدم background-clip: text واجعل لون النص شفافاً.
h1 {
font-size: 100px;
background-image: url('colorful-pattern.jpg');
/* قص الخلفية لتظهر فقط داخل الحروف */
-webkit-background-clip: text;
background-clip: text;
/* جعل النص شفافاً لنرى الخلفية من خلاله */
color: transparent;
}
8. الاختصار (Shorthand) والخلفيات المتعددة
بدلاً من كتابة 6 أسطر، يمكننا دمج كل شيء في سطر واحد باستخدام الخاصية background.
ترتيب الاختصار
الترتيب الشائع (ليس صارماً كلياً، لكن يُفضل الالتزام به):
color image position/size repeat attachment
مثال:
background: #000 url('img.jpg') center/cover no-repeat fixed;
خلفيات متعددة (Multiple Backgrounds)
نعم، يمكنك وضع أكثر من خلفية لنفس العنصر! يتم الفصل بينهم بفاصلة (,).
- الطبقة الأولى (First) هي التي تظهر في الأعلى (فوق الجميع).
- الطبقة الأخيرة هي التي تظهر في الخلف.
هذا مفيد جداً لوضع "طبقة لونية شفافة" فوق "صورة" لزيادة وضوح النص.
.card {
/* الطبقة الأولى: تدرج أسود شفاف (ليكون فوق الصورة) */
/* الطبقة الثانية: الصورة نفسها */
background-image:
linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
url('background.jpg');
background-size: cover;
color: white;
}