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; }
تحديد شفافية الخلفية
إذا أردت التلاعب بشفافية ( Transparency أو Opacity ) العنصر فهنا عندك خيارين:
- إستخدام الخاصية
opacityو عندها سيتم جعل العنصر بأكمله شفاف، أي الشفافية ستطبّق على الكلام و الخلفية معاً. - تحديد درجة اللون و شفافية الخلفية معاً بأسلوب RGBA أو HSLA و هكذا ستطبّق الشفافية على الخلفية فقط.
الفرق بين Opacity و Alpha
فيما يلي الشفافية مطبقة على العنصر بأكمله مما يعني أننا استخدمنا Opacity.
فيما يلي الشفافية مطبقة على خلفية العنصر فقط مما يعني أننا استخدمنا Alpha.
تطبيق الشفافية على العنصر بأكمله
في المثال التالي قمنا بتلوين جميع عناصر <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> الموجود في الصفحة بالأزرق مع تحديد نسبة شفافيتها بأسلوب 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); }
إضافة صورة كخلفية
لإضافة صورة كخلفية للعنصر نستخدم الخاصية background-image و من ثم نمرر لها مسار الصورة عن طريق الدالة url() التي نضعها لها كقيمة.
إفتراضياً، عند إضافة صورة كخلفية سواء لعنصر محدد أو للصفحة بأكملها فإنها تظل تكرر نفسها حتى تملئ كل خلفية الشيء الموضوعة فيه و لكنك بالطبع تستطيع تحديد مكان ظهورها، جعلها تتمدد لتملئ المساحة المخصصة للعنصر، جعلها لا تتكرر أكثر من مرة أو جعلها تكرر فقط بالطول أو العرض على حسب حاجتك.
في المثال التالي وضعنا الصورة paper.png كخلفية للصفحة، أي سنضعها كخلفية للوسم <body>.
لاحظ كيف أنها ستظل تكرر نفسها حتى تملئ كل الشاشة.
إذا قمت بوضع صورة و لم تظهر، فهذا يعني أن مسارها موضوع بشكل غير صحيح.
تحديد إتجاه تكرار صورة الخلفية
لتحديد كيف ستكرر صورة الخلفية نفسها أو لمنعها من التكرار نستخدم الخاصية background-repeat و من ثم نمرر لها إحدى القيم التالية:
no-repeatإذا أردنا جعلها لا تكرر نفسها.repeat-xإذا أردنا جعلها تكرر أفقياً فقط.repeat-yإذا أردنا جعلها تكرر عمودياً فقط.
في المثال التالي وضعنا الصورة gradient.png كخلفية للعنصر <header> مع جعلها تتكرر أفقياً.
في المثال السابق يوجد مشكلة و هي أنه في حال كان حجم الوسم بالطول أكبر من خلفيته فإنها لن تتمدد معه و سبب ذلك أننا لم نجعل الخلفية مطابقة لحجم العنصر الموجودة فيه.
تحديد حجم صورة الخلفية
لتحديد حجم صورة الخلفية بالنسبة للعنصر الموضوعة فيه نستخدم الخاصية background-size و من ثم نمرر لها إحدى القيم التالية:
autoهي القيمة الإفتراضية و التي تجعل الصورة تظهر بحجمها الحقيقي.containتجعل الصورة تظهر بالكامل بدون قطع أي جزء منها و تحاول مطابقة حجمها مع حجم العنصر.coverتطابق حجم الصورة مع حجم العنصر مع الحفاظ على قياسات الصورة و عند الحاجة فإنها تقوم بتقريب الصورة حتى تملئ خلفية العنصر.w% h%هنا نقصد تمرير عدد أو عددين بوحدة القياس المئوية %. مع الإشارة إلى أنه في حال تمرير عدد واحد فإنه سيمثل كم نريد أن يكون عرض الصورة بالنسبة للعنصر و طولها سيتم تحديده بشكل تلقائي، و في حال تمرير عددين لها فإن الأول سيمثل عرض الصورة و الثاني طولها.w-unit h-unitهنا نقصد تمرير عدد أو عددين بوحدة قياس محددة مثل px. مع الإشارة إلى أنه في حال تمرير عدد واحد فإنه سيمثل كم نريد أن يكون عرض الصورة بالنسبة للعنصر و طولها سيتم تحديده بشكل تلقائي، و في حال تمرير عددين لها فإن الأول سيمثل عرض الصورة و الثاني طولها.
في المثال التالي وضعنا الصورة gradient.png كخلفية للعنصر <header> مع جعلها تتكرر أفقياً و تتمدد حتى تملئ كل خلفية العنصر مهما كان طوله.
مثال
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; }
تثبيت صورة الخلفية أثناء النزول في الصفحة
لتحديد ما إن كانت الصورة الموضوعة كخلفية ستظل ثابتة (ظاهرة) خلف العنصر في حال النزول في الصفحة أم أنها ستبقى مكانها نستخدم الخاصية 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; }
تعريف كل خصائص الخلفية بسطر واحد
يمكنك تعريف كل خصائص الخلفية بشكل مختصر ( Shorthand Property ) حتى لا تضطر إلى كتابة الكثير من كود CSS.
عند اتباع هذا الأسلوب أكتب background و من ثم قم بتمرير خصائص القيم التالية لها بالترتيب و يمكنك عدم تمريرها جميعها:
في المثال التالي قمنا بتحديد جميع خصائص الخلفية دفعة واحدة.
