خلفات متعددة في CSS
ستتعلم في هذا الفصل كيفية إضافة صور خلفية متعددة إلى عنصر واحد.
كما ستتعلم أيضًا عن الخصائص التالية:
background-size(حجم الخلفية)background-origin(أصل الخلفية)background-clip(قص الخلفية)
خلفات متعددة في CSS
يسمح لك CSS بإضافة صور خلفية متعددة إلى عنصر واحد، وذلك من خلال خاصية background-image.
يتم فصل صور الخلفية المختلفة باستخدام الفواصل (كومات)، ويتم تكديس الصور فوق بعضها البعض، حيث تكون الصورة الأولى أقرب إلى المشاهد.
يوضح المثال التالي استخدام صورتي خلفية:
- الصورة الأولى: زهرة (يتم محاذاتها للأسفل واليمين)
- الصورة الثانية: خلفية ورقية (يتم محاذاتها للزاوية العلوية اليسرى)
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
يمكن تحديد صور خلفية متعددة باستخدام كل من خصائص الخلفية الفردية (كما في المثال السابق) أو خاصية الاختزال background.
يستخدم المثال التالي خاصية الاختزال background (لتحقيق نفس نتيجة المثال السابق):
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
حجم خلفية العنصر في CSS
تتيح لك خاصية background-size في CSS تحديد حجم صور الخلفية.
يمكن تحديد الحجم باستخدام وحدات الطول (بكسل – px أو إيم – em) أو النسب المئوية (%)، أو باستخدام إحدى الكلمتين المفتاحين: contain (احتواء) أو cover (تغطية).
في المثال التالي، يتم تغيير حجم صورة خلفية إلى حجم أصغر بكثير من الصورة الأصلية (باستخدام وحدات البكسل):
#div1 {
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
كلمتا مفتاحتان أخريان لخاصية background-size
بالإضافة إلى تحديد الحجم باستخدام وحدات أو نسب، تقدم خاصية background-size كلمتين مفتاحتين مفيدتين للتحكم بحجم صورة الخلفية:
- contain (احتواء):
تقوم هذه القيمة بتوسيع صورة الخلفية بأكبر قدر ممكن شرط أن يظل كل من العرض والارتفاع داخل مساحة المحتوى للعنصر. وبناءً على ذلك، واعتمادًا على نسب صورة الخلفية ومنطقة وضع الخلفية، فقد تظهر بعض مناطق الخلفية غير مغطاة بصورة الخلفية.
- cover (تغطية):
تقوم هذه القيمة بتوسيع صورة الخلفية بحيث يتم تغطية مساحة المحتوى للعنصر بالكامل بواسطة صورة الخلفية (يكون كل من العرض والارتفاع مساويين أو أكبر من مساحة المحتوى). وبالتالي، قد لا تظهر بعض أجزاء من صورة الخلفية في منطقة وضع الخلفية.
يوضح المثال التالي استخدام contain و cover:
#div1 {
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2 {
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
تحديد حجم صور الخلفيات المتعددة في CSS
تسمح خاصية background-size أيضًا بتحديد قيم متعددة لحجم الخلفية (باستخدام قائمة مفصولة بالفواصل) عند العمل مع خلفيات متعددة.
يوضح المثال التالي تحديد ثلاثة صور خلفية، مع قيمة background-size مختلفة لكل صورة:
#example1 {
background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
background-size: 50px, 130px, auto;
}
خلفية صورة كاملة الحجم في CSS
نفترض أنك تريد أن يكون موقع الويب الخاص بك يحتوي على صورة خلفية تغطي نافذة المتصفح بأكملها وفي جميع الأوقات.
المتطلبات هي كما يلي:
- ملء الصفحة بأكملها بالصورة (بدون فراغات بيضاء)
- تغيير حجم الصورة حسب الحاجة
- محاذاة الصورة في وسط الصفحة
- عدم ظهور شريط التمرير
يوضح المثال التالي كيفية تحقيق ذلك:
- استخدم عنصر
<html>(يكون عنصر<html>دائمًا على الأقل بنفس ارتفاع نافذة المتصفح). - ثم اضبط خلفية ثابتة ومحاذة في الوسط عليه.
- ثم اضبط حجمه باستخدام خاصية
background-size.
html {
background: url(img_man.jpg) no-repeat center fixed;
background-size: cover;
}
صورة البطل (Hero Image) باستخدام CSS
يمكنك أيضًا استخدام خصائص خلفية مختلفة على عنصر <div> لإنشاء صورة بطل (Hero Image) (صورة كبيرة مع نص) ووضعها في المكان الذي تريده.
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}
خاصية CSS background-origin
تحدد خاصية background-origin في CSS موقع بدء صورة الخلفية.
تتخذ الخاصية ثلاث قيم مختلفة:
- border-box: تبدأ صورة الخلفية من الزاوية العلوية اليسرى للحد.
- padding-box (الافتراضية): تبدأ صورة الخلفية من الزاوية العلوية اليسرى لحافة الحشو.
- content-box: تبدأ صورة الخلفية من الزاوية العلوية اليسرى للمحتوى.
يوضح المثال التالي الفرق بين قيم background-origin المختلفة:
#example1 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
خاصية CSS background-clip
تحدد خاصية background-clip في CSS منطقة رسم الخلفية.
تتخذ الخاصية ثلاث قيم مختلفة:
- border-box (الافتراضية): يتم رسم الخلفية حتى الحافة الخارجية للحد.
- padding-box: يتم رسم الخلفية حتى الحافة الخارجية للحشو.
- content-box: يتم رسم الخلفية داخل مربع المحتوى.
يوضح المثال التالي الفرق بين قيم background-clip المختلفة:
#example1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
