❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

CSSالخلفيات

  • خصائص الخلفيات
  • تحديد لون خلفية العنصر
  • تحديد شفافية الخلفية
  • إضافة صورة كخلفية
  • تحديد إتجاه تكرار صورة الخلفية
  • تحديد حجم صورة الخلفية
  • تحديد مكان صورة الخلفية
  • تثبيت صورة الخلفية أثناء النزول في الصفحة
  • تعريف كل خصائص الخلفية بسطر واحد

خصائص الخلفيات

أي عنصر تضعه في الصفحة يمكنك تحديد لون خلفيته، وضع صورة كخلفية له، تحديد حجم و مكان الصورة التي تم وضعها كخلفية له، جعل صورة الخلفية تتكرر أو تتمدد بالشكل المناسب.

في هذا الدرس ستتعرف على الخصائص التالية التي تستخدم في تصميم خلفية العناصر:

  • background-color
  • background-image
  • background-repeat
  • background-size
  • background-position
  • background-attachment
  • background

فيما يلي أسماء الصور التي سنستخدمها في الأمثلة و بأحجامها الفعلية.


paper.png


gradient.png


pyramids.png


moon.png

تحديد لون خلفية العنصر

لتلوين خلفية العنصر نستخدم الخاصية background-color و اللون نضعه لها كقيمة من خلال إسمه ( Color Name ) أو بتحديد درجته بأسلوب HEX أو RGB أو RGBA أو HSL أو HSLA كما تعلمنا في درس الألوان.


فيما يلي قمنا بتلوين خلفية الصفحة و خلفية العناصر الموجودة فيها.

مثال

body {
background-color: lightblue;
}
h1 {
background-color: burlywood;
}
p {
background-color: darkgray;
}
body { background-color: lightblue; } h1 { background-color: burlywood; } p { background-color: darkgray; }
جرب الكود

تحديد شفافية الخلفية

إذا أردت التلاعب بشفافية ( Transparency أو Opacity ) العنصر فهنا عندك خيارين:

  • إستخدام الخاصية opacity و عندها سيتم جعل العنصر بأكمله شفاف، أي الشفافية ستطبّق على الكلام و الخلفية معاً.
  • تحديد درجة اللون و شفافية الخلفية معاً بأسلوب RGBA أو HSLA و هكذا ستطبّق الشفافية على الخلفية فقط.

فيما يلي الشفافية مطبقة على العنصر بأكمله.

Opacity 1
Opacity 0.7
Opacity 0.4

فيما يلي الشفافية مطبقة على خلفية العنصر فقط.

Alpha 1
Alpha 0.7
Alpha 0.4

تطبيق الشفافية على العنصر بأكمله

في المثال التالي قمنا بتلوين جميع عناصر <h1> الموجود في الصفحة بالأزرق.

بعدها قمنا بإعطاء بإعطاء شفافية للعناصر على الشكل التالي:

  • أي عنصر <h1> يستخدم الكلاس first سيتم إعطاؤه شفافية بنسبة 0.8.
  • أي عنصر <h1> يستخدم الكلاس second سيتم إعطاؤه شفافية بنسبة 0.5.
  • أي عنصر <h1> يستخدم الكلاس third سيتم إعطاؤه شفافية بنسبة 0.2.

مثال

h1 {
background-color: blue;
}
h1.first {
opacity: 0.8;
}
h1.second {
opacity: 0.5;
}
h1.third {
opacity: 0.2;
}
h1 { background-color: blue; } h1.first { opacity: 0.8; } h1.second { opacity: 0.5; } h1.third { opacity: 0.2; }
جرب الكود

تطبيق الشفافية على خلفية العنصر فقط

في المثال التالي قمنا بتلوين خلفية جميع عناصر <h1> الموجود في الصفحة بالأزرق مع تحديد نسبة شفافيتها بأسلوب RGBA على الشكل التالي:

  • أي عنصر <h1> ستكون خلفيته زرقاء و شفافة بنسبة 1، بمعنى أنه لا يملك أي شفافية.
  • أي عنصر <h1> يستخدم الكلاس first ستكون خلفيته زرقاء و شفافة بنسبة 0.8.
  • أي عنصر <h1> يستخدم الكلاس second ستكون خلفيته زرقاء و شفافة بنسبة 0.5.
  • أي عنصر <h1> يستخدم الكلاس third ستكون خلفيته زرقاء و شفافة بنسبة 0.2.

مثال

h1 {
background-color: rgba(0, 0, 255, 1);
}
h1.first {
background-color: rgba(0, 0, 255, 0.8);
}
h1.second {
background-color: rgba(0, 0, 255, 0.5);
}
h1.third {
background-color: rgba(0, 0, 255, 0.2);
}
h1 { background-color: rgba(0, 0, 255, 1); } h1.first { background-color: rgba(0, 0, 255, 0.8); } h1.second { background-color: rgba(0, 0, 255, 0.5); } h1.third { background-color: rgba(0, 0, 255, 0.2); }
جرب الكود

إضافة صورة كخلفية

لإضافة صورة كخلفية للعنصر نستخدم الخاصية background-image و من ثم نمرر لها مسار الصورة عن طريق الدالة url() التي نضعها لها كقيمة.

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


في المثال التالي وضعنا الصورة paper.png كخلفية للصفحة، أي سنضعها كخلفية للوسم <body>.
لاحظ كيف أنها ستظل تكرر نفسها حتى تملئ كل الشاشة.

مثال

body {
background-image: url('paper.png');
}
body { background-image: url('paper.png'); }
جرب الكود

إذا قمت بوضع صورة و لم تظهر، فهذا يعني أن طريقة وضعك للرابط غير صحيحة.

تحديد إتجاه تكرار صورة الخلفية

لتحديد كيف ستكرر صورة الخلفية نفسها أو لمنعها من تكرار نستخدم الخاصية background-repeat و من ثم نمرر لها إحدى القيم التالية:

  • no-repeat إذا أردنا جعلها لا تكرر نفسها.
  • repeat-x إذا أردنا جعلها تكرر أفقياً فقط.
  • repeat-y إذا أردنا جعلها تكرر عمودياً فقط.

في المثال التالي وضعنا الصورة gradient.png كخلفية للعنصر <header> مع جعلها تتكرر أفقياً.

مثال

header {
background-image: url('gradient.png');
background-repeat: repeat-x;
}
header { background-image: url('gradient.png'); background-repeat: repeat-x; }
جرب الكود

في المثال السابق يوجد مشكلة و هي أنه في حال كان حجم الوسم بالطول أكبر من خلفيته فإنها لن تتمدد معه و سبب ذلك أننا لم نجعل الخلفية مطابقة لحجم العنصر الموجودة فيه.

تحديد حجم صورة الخلفية

لتحديد حجم صورة الخلفية بالنسبة للعنصر الموضوعة فيه نستخدم الخاصية background-size و من ثم نمرر لها إحدى القيم التالية:

  • auto هي القيمة الإفتراضية و التي تجعل الصورة تظهر بحجمها الحقيقي.
  • contain تجعل الصورة تظهر بالكامل بدون قطع أي جزء منها و تحاول مطابقة حجمها مع حجم العنصر.
  • w% h% هنا نقصد تمرير رقم مئوي يمثل كم نريد أن يكون عرض الصورة بالنسبة للعنصر و طولها سيتم تحديده بشكل تلقائي. و يمكنك تمرير رقمين مئويين لها إن أردت، الأول يمثل عرض الصورة و الثاني طولها.
  • w-unit h-unit هنا نقصد تمرير رقم بوحدة قياس محددة مثل px يمثل كم نريد أن يكون عرض الصورة بالنسبة للعنصر و طولها سيتم تحديده بشكل تلقائي. و يمكنك تمرير رقمين لها إن أردت، الأول يمثل عرض الصورة و الثاني طولها.

في المثال التالي وضعنا الصورة gradient.png كخلفية للعنصر <header> مع جعلها تتكرر أفقياً و تتمدد حتى تملئ كل خلفية العنصر مهما كان طوله.

مثال

header {
background-image: url('gradient.png');
background-repeat: repeat-x;
background-size: 100% 100%;
}
header { background-image: url('gradient.png'); background-repeat: repeat-x; background-size: 100% 100%; }
جرب الكود

تحديد مكان صورة الخلفية

إذا لم تقم بتحديد مكان ظهور صورة الخلفية فإنها إفتراضياً تظهر في الأعلى ناحية اليسار.

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

فيما يلي القيم التي يمكنك تمريرها لتحديد مكان ظهور الخلفية:

  • left top لإظهار الصورة ناحية اليسار و في الأعلى.
  • left center لإظهار الصورة ناحية اليسار و في الوسط عمودياً.
  • left bottom لإظهار الصورة ناحية اليسار و في الأسفل.
  • right top لإظهار الصورة ناحية اليمين و في الأعلى.
  • right center لإظهار الصورة ناحية اليمين و في الوسط عمودياً.
  • right bottom لإظهار الصورة ناحية اليمين و في الأسفل.
  • center top لإظهار الصورة في الوسط أفقياً و في الأعلى.
  • center center لإظهار الصورة في الوسط أفقياً و عمودياً.
  • center bottom لإظهار الصورة في الوسط أفقياً و في الأسفل.
  • x% y% هنا نقصد تمرير رقم مئوي مكان x يمثل كم نريد أن تكون الصورة بعيدة جهة يسار العنصر و تمرير رقم مئوي مكان y يمثل كم نريد أن تكون الصورة بعيدة جهة أعلى العنصر.
  • x-unit y-unit هنا نقصد تمرير رقم بوحدة قياس محددة مثل px يمثل كم نريد أن تكون الصورة بعيدة جهة يسار العنصر و تمرير رقم بوحدة قياس محددة مكان y يمثل كم نريد أن تكون الصورة بعيدة جهة أعلى العنصر.

في المثال التالي وضعنا الصورة pyramids.png كخلفية للعنصر الذي يملك كلاس egypt مع جعلها لا تتكرر و تظهر فيه في الأعلى ناحية اليمين.

مثال

.egypt {
background-image: url('pyramids.png');
background-repeat: no-repeat;
background-position: right top;
}
.egypt { background-image: url('pyramids.png'); background-repeat: no-repeat; background-position: right top; }
جرب الكود

تثبيت صورة الخلفية أثناء النزول في الصفحة

لتحديد ما إن كانت الصورة الموضوعة كخلفية ستظل ثابتة (ظاهرة) خلف العنصر في حال النزول في الصفحة أم أنها ستبقى مكانها نستخدم الخاصية background-attachment و من ثم نمرر لها إحدى القيم التالية:

  • scroll لجعل الصورة تبقى مكانها في حال النزول في الصفحة و هذه قيمتها الإفتراضية.
  • fixed لجعل الصورة تظل ظاهرة في الصفحة عند النزول فيها إذا كان محتواها أكبر منها.
  • local لجعل الصورة تظل ظاهرة عند النزول بداخل العنصر إذا كان محتواه أكبر منه.

fixed يفترض أن تستخدمها مع الوسم <body> فقط لأنها تستخدم لتثبيت الخلفية بالنسبة للصفحة بأكملها.

local يفترض أن تستخدمها مع أي وسم موضوع بداخل الوسم <body> لأنها تستخدم لتثبيت الخلفية بالنسبة لعنصر محدد في الصفحة.


في المثال التالي قمنا بتلوين خلفية الصفحة و كذلك وضعنا الصورة moon.png كخلفية ثابتة فيها مع جعلها لا تتكرر و تظهر في الأعلى ناحية اليمين.

إذاً عند النزول في الصفحة ستلاحظ أنها ستظل ظاهرة.

مثال

body {
background-image: url('moon.png');
background-color: cornflowerblue;
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
body { background-image: url('moon.png'); background-color: cornflowerblue; background-repeat: no-repeat; background-position: right top; background-attachment: fixed; }
جرب الكود

تعريف كل خصائص الخلفية بسطر واحد

يمكنك تعريف كل خصائص الخلفية بشكل مختصر ( Shorthand Property ) حتى لا تضطر إلى كتابة الكثير من كود CSS.

عند اتباع هذا الأسلوب أكتب background و من ثم قم بتمرير خصائص القيم التالية لها بالترتيب و يمكنك عدم تمريرها جميعها:

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];

مثال

body {
background: cornflowerblue url('moon.png') no-repeat fixed right top;
}
body { background: cornflowerblue url('moon.png') no-repeat fixed right top; }
جرب الكود
الدرس التالي❯ ❮الدرس السابق