خلفيات متعددة CSS
ستتعلم في هذا الفصل كيفية إضافة صور خلفية متعددة إلى عنصر واحد.
ستتعرف أيضًا على الخصائص التالية:
background-sizebackground-originbackground-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 تحديد حجم صور الخلفية.
يمكن تحديد الحجم بالأطوال ، أو بالنسب المئوية ، أو باستخدام إحدى الكلمتين الرئيسيتين: تحتوي أو تغطي.
يقوم المثال التالي بتغيير حجم صورة الخلفية إلى حجم أصغر بكثير من الصورة الأصلية (باستخدام وحدات البكسل):
أشكره على الألم
الألم نفسه هو الحب
هذا هو السبب في أنه لأدنى ما يأتي ، من تتحمل ممارستنا العادية للاستفادة من العواقب
ها هو الكود:
مثال
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
القيمتان المحتملتان الأخريان لـ background-sizeهي contain
و cover.
تقوم 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;
}
تحديد أحجام صور الخلفية المتعددة
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;
}
صورة الخلفية بالحجم الكامل
نريد الآن الحصول على صورة خلفية على موقع ويب تغطي نافذة المتصفح بالكامل في جميع الأوقات.
المتطلبات هي كما يلي:
- املأ الصفحة بأكملها بالصورة (بدون مسافة بيضاء)
- مقياس الصورة حسب الحاجة
- وسط الصورة على الصفحة
- لا تسبب أشرطة التمرير
يوضح المثال التالي كيفية القيام بذلك ؛ استخدم عنصر <html> (يكون عنصر <html> دائمًا على الأقل بارتفاع نافذة المتصفح). ثم قم بتعيين خلفية ثابتة ومركزية عليها. ثم اضبط حجمه باستخدام خاصية حجم الخلفية:
مثال
html {
background: url(img_man.jpg) no-repeat
center fixed;
background-size: cover;
}
صورة البطل
يمكنك أيضًا استخدام خصائص خلفية مختلفة على <div> لإنشاء صورة رئيسية (صورة كبيرة بها نص) ، ووضعها في المكان الذي تريده.
مثال
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position:
relative;
}
خاصية CSS background-origin
تحدد خاصية CSS background-originمكان وضع صورة الخلفية.
تأخذ الخاصية ثلاث قيم مختلفة:
- مربع الحدود - تبدأ صورة الخلفية من الزاوية اليسرى العليا للحد
- مربع الحشو - (افتراضيًا) تبدأ صورة الخلفية من الزاوية اليسرى العليا لحافة المساحة المتروكة
- 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
تحدد خاصية CSS background-clipمساحة اللوحة للخلفية.
تأخذ الخاصية ثلاث قيم مختلفة:
- مربع الحدود - (افتراضيًا) يتم رسم الخلفية على الحافة الخارجية للحدود
- صندوق الحشو - الخلفية مطلية بالحافة الخارجية للحشوة
- content-box - الخلفية مطلية داخل مربع المحتوى
يوضح المثال التالي background-clipالخاصية:
مثال
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
خصائص الخلفية المتقدمة لـ CSS
| Property | Description |
|---|---|
| background | A shorthand property for setting all the background properties in one declaration |
| background-clip | Specifies the painting area of the background |
| background-image | Specifies one or more background images for an element |
| background-origin | Specifies where the background image(s) is/are positioned |
| background-size | Specifies the size of the background image(s) |