الألوان والخلفيات في CSS
تعلّم كيفية إضافة الألوان، الصور، التدرجات اللونية، وتعديل شفافية ومواقع الخلفيات.
1. الألوان (Colors & Background-color)
يمكن تعريف الألوان باستخدام الأسماء (red)، أو HEX (#ff0000)، أو RGB، أو RGBA للشفافية.
المعاينة
Name: Red
HEX: #3b82f6
RGB: Green
RGBA: 50% Opacity
شرح الكود:
color: تغيير لون النص نفسه.background-color: تغيير لون خلفية العنصر.rgba(r, g, b, a): الحرف a يعني Alpha وهو يحدد الشفافية من 0 (مخفي تماماً) إلى 1 (ظاهر تماماً).
2. صورة الخلفية (Background Image)
كيفية إضافة صورة للخلفية والتحكم في تكرارها وحجمها وموقعها.
المعاينة
Background Cover
شرح الكود:
background-image: url('image.jpg');: مسار الصورة المعروضة.background-repeat: no-repeat;: منع الصورة من التكرار إذا كان حجمها أصغر من الصندوق. (يمكن استخدامrepeat-xأوrepeat-y)background-size: cover;: تغطية كامل المساحة المتاحة دون تشويه الصورة (قد يتم قص أجزاء منها). يمكن استخدامcontainلظهور كامل الصورة، أو أحجام بالبيكسل مثل400px 400px.background-position: center;: وضعية التركيز في الصورة.background-attachment: fixed;: (اختياري) يجعل الصورة ثابتة عند التمرير بالماوس (Parallax effect).
3. التدرجات اللونية (Linear Gradients)
طريقة مزج عدة ألوان مع تحديد اتجاه التدرج.
المعاينة
من فوق لتحت (افتراضي)
إلى اليمين (to right)
بزاوية 45 درجة
شرح الكود:
- نستخدم خاصية
background(أو background-image) للتدرجات، وليس background-color. linear-gradient(red, blue): تدرج من الأعلى للأسفل (الافتراضي).linear-gradient(to top, red, blue): تدرج للأعلى. يمكن استخدام اتجاهات مثل to left, to bottom right.linear-gradient(45deg, color1, color2): تحديد زاوية معينة بالدرجات (deg).
4. دمج التدرج اللوني مع الصورة (Overlay)
لجعل الصورة غامقة أو إضافة طبقة لونية فوقها لتبدو النصوص أوضح، ندمج linear-gradient مع url.
المعاينة
Text is Readable Now
شرح الكود:
- نكتب
background: linear-gradient(...), url(...);. - الطبقة الأولى هي linear-gradient وتكون نصف شفافة باستخدام rgba (في هذا المثال أضفنا طبقة سوداء بشفافية 70%).
- الطبقة الثانية هي مسار الصورة `url()`.