7- خلفية العناصر في CSS

تستخدم خصائص الخلفية في لغة CSS لإضافة تأثيرات وتصميمات خلفية للعناصر في صفحات الويب. توفر لك هذه الخصائص تحكمًا كبيراً في مظهر الصفحة وجمالياتها.

خاصية background-color في CSS

تحدد خاصية background-color في لغة CSS لون خلفية عنصر معين.

استخدامات شائعة:

• يمكنك استخدامها لتعيين لون خلفية الصفحة بأكملها:

body {
  background-color: lightblue;
}

• يمكنك استهداف عناصر محددة مثل الفقرات أو العناوين:

p {
  background-color: #f2f2f2;
}

طرق تحديد اللون:

• أسماء الألوان: يمكنك استخدام أسماء ألوان قياسية مثل “red”، “green”، “blue”.
• قيم HEX: يمكنك استخدام قيم HEX مكونة من 6 حروف، على سبيل المثال “#ff0000” للون الأحمر.
• قيم RGB: يمكنك استخدام قيم RGB لتحديد كميات الأحمر والأخضر والأزرق، على سبيل المثال rgb(255, 0, 0) للون الأحمر.

خاصية الشفافية (Opacity) في CSS

تحدد خاصية opacity مدى شفافية عنصر معين في لغة CSS. تتراوح قيمتها بين 0.0 (شفاف بالكامل) و 1.0 (غير شفاف على الإطلاق). كلما انخفضت القيمة، زادت شفافية العنصر.

أمثلة:

• opacity: 1: لون كامل، غير شفاف
• opacity: 0.6: شفاف بنسبة 40%
• opacity: 0.3: شفاف بنسبة 70%
• opacity: 0.1: شفاف بنسبة 90%

استخدامات:

• يمكنك استخدام هذه الخاصية لإضافة تأثيرات تلاشي أو طبقات شفافة على العناصر.
• يمكنك أيضاً استخدامها لإنشاء عناصر تفاعلية قابلة للنقر والتي تكشف محتوى آخر عند التمرير فوقها.

div {
  background-color: green;
  opacity: 0.3;
}

الشفافية باستخدام RGBA

إذا كنت لا تريد تطبيق الشفافية على العناصر الفرعية، فعندئذٍ يمكنك استخدام قيم ألوان RGBA. يحدد المثال التالي قيمة الشفافية للون الخلفي وليس النص:

نسب الشفافية المختلفة:

• 100% شفافية: rgba(red, green, blue, 1.0) (لون كامل بدون شفافية)
• 60% شفافية: rgba(red, green, blue, 0.6) (شفاف بنسبة 40%)
• 30% شفافية: rgba(red, green, blue, 0.3) (شفاف بنسبة 70%)
• 10% شفافية: rgba(red, green, blue, 0.1) (شفاف بنسبة 90%)

تذكر:

• تعلمت في قسم ألوان CSS أنه يمكنك استخدام قيم RGB لتحديد اللون. بجانب RGB، يمكنك استخدام قيم RGB مع قناة ألفا (RGBA) التي تحدد درجة الشفافية للون.
• يتم تحديد قيمة لون RGBA باستخدام: rgba(red, green, blue, alpha). حيث تمثل alpha قيمة بين 0.0 (شفاف بالكامل) و 1.0 (غير شفاف على الإطلاق).

div {
  background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}

خاصية background-image في CSS

تتيح لك خاصية background-image في CSS إضافة صورة كخلفية لأي عنصر في صفحة الويب. بشكل افتراضي، تتكرر الصورة لتغطية العنصر بأكمله.

استخدامات شائعة:

• تعيين صورة خلفية لصفحة كاملة:

body {
  background-image: url("bg-image.jpg");
}

• إضافة صورة خلفية لعناصر محددة مثل الفقرات أو العناوين:

p {
  background-image: url("paper.gif");
}

نصائح لاستخدام صور الخلفية بشكل فعال:

• اختر صورة لا تعيق قراءة المحتوى: تأكد من أن الصورة المستخدمة كخلفية لا تجعل قراءة النص صعبة.
• استخدم صورا عالية الجودة وغير مشوشة: تجنب استخدام الصور منخفضة الجودة أو المشوشة.
• لا تبالغ في التأثيرات: استخدم صور الخلفية باعتدال لتجنب تشتيت انتباه المستخدم.
• اختبر على شاشات مختلفة: تأكد من أن مظهر صورة الخلفية جيد على مختلف الشاشات والأجهزة.

ملاحظات:

• يمكنك تعديل خصائص أخرى للصورة باستخدام خصائص مثل background-size و background-position.
• من المهم مراعاة حقوق الملكية الفكرية للصور التي تستخدمها.

خاصية تكرار الخلفية (background-repeat) في CSS

عندما تستخدم خاصية background-image لعرض صورة كخلفية لأي عنصر، فإن الصورة بشكل افتراضي تُكرر أفقياً ورأسياً لتغطية كامل العنصر. لكن بعض الصور لا تصلح لل تكرار بهذه الطريقة لأنها قد تظهر بشكل غير مناسب.

الأنواع المختلفة لتكرار الخلفية:

• repeat-x: تكرار الصورة أفقياً فقط.
• repeat-y: تكرار الصورة رأسياً فقط.
• no-repeat: عرض الصورة مرة واحدة فقط دون تكرار.

أمثلة:

• الصورة الأصلية:

body {
  background-image: url("gradient_bg.png");
}

• تكرار الصورة أفقياً (مظهر غير مناسب):

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

• تكرار الصورة أفقياً (مظهر أفضل):

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

• عروض الصورة مرة واحدة فقط:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}

ملاحظة: في المثال الأخير، تظهر الصورة مرة واحدة ولكنها فوق النص. يمكنك استخدام خاصية background-position لتحريكها إلى مكان مناسب.

خاصية موضع الخلفية (background-position):

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

أمثلة:

• background-position: top;: وضع الصورة في الأعلى.
• background-position: right;: وضع الصورة على اليمين.
• background-position: center;: وضع الصورة في المنتصف.
• background-position: right top;: وضع الصورة في الزاوية العلوية اليمنى.

ملخص:

• استخدم background-repeat لتحكم في تكرار صورة الخلفية.
• استخدم background-position لتحديد موقع صورة الخلفية.
• اختر خيارات التكرار والموضع المناسبة للحصول على مظهر ملائم لتصميمك.

خاصية ربط الخلفية (background-attachment) في CSS

تتحكم خاصية background-attachment في طريقة عرض صورة الخلفية عند التمرير في الصفحة. يمكنك تحديد هل تبقى الصورة ثابتة في مكانها أم تتحرك مع باقي محتوى الصفحة.

الاختيارات المتاحة:

• fixed: الصورة ثابتة في مكانها بغض النظر عن التمرير.
• scroll: الصورة تتحرك مع باقي محتوى الصفحة عند التمرير.

أمثلة:

• ثبيت صورة الخلفية في الزاوية العلوية اليمنى:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

• جعل صورة الخلفية تتحرك مع الصفحة عند التمرير:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

متى تستخدم كل خيار؟

• استخدم fixed لإنشاء تأثيرات بارالاكس مثيرة للاهتمام حيث تتحرك الخلفية بسرعة أبطأ من المحتوى عند التمرير.
• استخدم scroll إذا كنت تريد أن تظل الخلفية مرتبطة بمحتوى الصفحة وتتحرك معه بشكل طبيعي.

ملاحظات:

• لا تدعم جميع المتصفحات القديمة خاصية fixed.
• قد يؤثر استخدام fixed على تجربة المستخدم على الشاشات الصغيرة.

خاصية الخلفية المختصرة (background) في CSS

لتوفير الوقت وتقليل عدد الأسطر في الكود، يمكنك استخدام خاصية background المختصرة لتحديد جميع خصائص الخلفية في تصريح واحد.

الطريقة التقليدية:

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

الطريقة المختصرة:

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

ترتيب القيم في الخاصية المختصرة:

1. background-color
2. background-image
3. background-repeat
4. background-attachment (اختياري)
5. background-position

ملاحظات:

• ليس من الضروري تحديد جميع القيم في الخاصية المختصرة، ولكن يجب الحفاظ على الترتيب الصحيح للقيم المراد تحديدها.
• في الأمثلة السابقة، لم يتم استخدام خاصية background-attachment لأنها لا تتطلب قيمة في هذه الحالة.
• عند استخدام الخاصية المختصرة، يتم تعيين القيم الافتراضية لأي خصائص لم يتم تحديدها بشكل صريح.

فوائد استخدام الخاصية المختصرة:

• تقليل عدد الأسطر في الكود وتحسين قراءته.
• تسريع عملية الكتابة والتعديل.
• تسهيل إدارة الخصائص المتعلقة بالخلفية.