الخلفيات

خلف كل مربّع CSS، تتوفّر طبقة مخصّصة تُسمّى طبقة الخلفية. توفّر CSS مجموعة متنوعة من الطرق لإجراء تغييرات مفيدة عليها، بما في ذلك السماح بخلفيات متعددة.

تكون طبقات الخلفية أبعد ما يكون عن المستخدم، ويتم عرضها خلف محتوى المربّع بدءًا من منطقة padding-box. يتيح ذلك لطبقة الخلفية عدم التداخل مع الحدود على الإطلاق.

لون الخلفية

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

صور الخلفية

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

يمكنك إضافة صورة خلفية على طبقة background-color باستخدام السمة background-image. يقبل "background-image" ما يلي:

  • عنوان URL للصورة أو عنوان URL للبيانات باستخدام دالة CSS‏ url
  • صورة تم إنشاؤها ديناميكيًا باستخدام دالة CSS متدرّجة.

ضبط صورة خلفية باستخدام دالة CSS‏ url

الخلفيات المتدرّجة باستخدام CSS

تتوفّر عدّة دوال متدرجة في CSS للسماح لك بإنشاء صورة خلفية عند تمرير لونَين أو أكثر.

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

عرض توضيحي يعرض مثالاً على تطبيق صورة خلفية باستخدام دوالّ التدرّج:

تكرار صور الخلفية

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

يمكنك تغيير ذلك باستخدام السمة background-repeat مع إحدى القيم التالية:

  • repeat: تتكرّر الصورة ضمن المساحة المتاحة، ويتم اقتصاصها حسب الحاجة.
  • round: تتكرّر الصورة أفقيًا وعموديًا لتلائم أكبر عدد ممكن من النُسخ في المساحة المتاحة. مع زيادة المساحة المتوفّرة، تتمدد الصورة، وبعد تمديد نصف عرض الصورة الأصلي، يتم ضغطها لإضافة المزيد من نُسخ الصورة.
  • space: تتكرّر الصورة أفقيًا وعموديًا لتلائم أكبر عدد ممكن من النُسخ ضمن المساحة المتاحة بدون اقتصاص، مع ترك مسافة بين نُسخ الصورة حسب الحاجة. تلامس الصور المتكرّرة حواف المساحة التي تشغلها طبقة الخلفية، مع توزيع مساحة بيضاء بالتساوي بينها.

تسمح لك السمة background-repeat بضبط سلوك المحورَين السيني والصادي بشكلٍ مستقل. تضبط المَعلمة الأولى سلوك التكرار الأفقي، وتضبط المَعلمة الثانية سلوك التكرار العمودي.

في حال استخدام قيمة واحدة، سيتم تطبيقها على كلّ من عمليات التكرار الأفقي والعمودي.

تتوفّر أيضًا خيارات مختصرة مناسبة تتألف من كلمة واحدة لجعل رسالتك أكثر وضوحًا.

تكرّر القيمة repeat-x الصورة أفقيًا فقط، وهي مساوية للقيمة repeat no-repeat.

يوضّح العرض التوضيحي التالي إمكانات السمة background-repeat التالية:

موضع الخلفية

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

قد تكون لاحظت أنّه عند تصميم بعض الصور على الويب باستخدام ملف بيان background-repeat: no-repeat، يتم عرض هذه الصور في أعلى يمين الحاوية.

يكون الموضع الأولي لصور الخلفية هو أعلى يمين الصفحة. تتيح لك السمة background-position تغيير هذا السلوك عن طريق إزاحة موضع الصورة.

كما هو الحال مع background-repeat، تتيح لك السمة background-position وضع الصور على طول محورَي x وy بشكل مستقل باستخدام قيمتَين تلقائيًا.

عند استخدام أطوال CSS والنسب المئوية، تتطابق المَعلمة الأولى مع المحور الأفقي بينما تتطابق المَعلمة الثانية مع المحور الرأسي.

عند استخدام الكلمات الرئيسية فقط، لا يهم ترتيبها:

الإجراءات الموصى بها
background-position: left 50%;
الإجراءات الموصى بها
background-position: top left;
الإجراءات الموصى بها
background-position: left top;

لا يهمّ الترتيب بالنسبة إلى الكلمات الرئيسية المرتبطة بمحاور مختلفة للموقع.

الإجراءات غير المُوصى بها
  background-position: 50% left;

عند استخدام قيم CSS إلى جانب الكلمات الرئيسية، يكون الترتيب مهمًا. تمثّل القيمة الأولى المحور الأفقي والقيمة الثانية المحور العمودي.

الإجراءات غير المُوصى بها
  background-position: left right;

لا يمكنك استخدام كلمات رئيسية مرتبطة بالمحور نفسه في الوقت نفسه.

تحتوي السمة background-position أيضًا على اختصار مفيد لقيمة واحدة، ويتم تحويل القيمة المُهمَلة إلى 50%. في ما يلي مثال يوضّح ذلك باستخدام الكلمات الرئيسية التي تقبلها السمة background-position:

بالإضافة إلى التنسيق التلقائي لمعلَمتَين وتنسيق المَعلمة الواحدة، تقبل السمة background-position أيضًا ما يصل إلى أربع مَعلمات:

عند استخدام ثلاث مَعلمات أو أربع مَعلمات، يجب أن تسبق الكلمة الرئيسية top أو left أو right أو bottom طول CSS أو النسبة المئوية لكي يحسب المتصفّح حافة مربّع CSS التي يجب أن يبدأ منها ال offset.

عند استخدام ثلاث مَعلمات، يمكن أن يكون طول أو قيمة CSS المَعلمة الثانية أو الثالثة مع المَعلمتَين الأخريتَين وهما كلمتَان رئيسيتان، وسيتم استخدام الكلمة الرئيسية التي تليها لتحديد الحافة التي يتوافق معها طول أو قيمة CSS لتكون القيمة المرجعية. يتم ضبط القيمة المرجعية للكلمة الرئيسية الأخرى المحدّدة على 0.

الإجراءات الموصى بها
background-position: bottom 88% right;
الإجراءات الموصى بها
background-position: right bottom 88%;
الإجراءات غير المُوصى بها
background-position: 88% bottom right;
يجب أن تسبق الكلمات الرئيسية top أو right أو bottom أو left قيمة طول CSS عند استخدام ثلاث مَعلمات أو أكثر.
الإجراءات الموصى بها
background-position: bottom 88% right 33%;
الإجراءات الموصى بها
background-position: right 33% bottom 88%;
الإجراءات غير المُوصى بها
background-position: 88% 33% bottom left;
يجب أن تسبق الكلمات الرئيسية top أو right أو bottom أو left قيمة طول CSS عند استخدام ثلاث مَعلمات أو أكثر.

في حال تطبيق background-position: top left 20% على صورة خلفية في CSS، يتم وضع الصورة في أعلى المربّع، وتمثل قيمة 20% إزاحة بنسبة% 20 من يمين المربّع (على محور x).

في حال تطبيق background-position: top 20% left على صورة خلفية في CSS، تمثّل القيمة ‎20% إزاحة بنسبة% 20 من أعلى مربّع CSS (على محور y)، ويتم وضع الصورة على يمين المربّع.

عند استخدام أربع مَعلمات، يتم إقران الكلمتين الرئيسيتَين بقيمتَين تتوافقان مع إزاحة مقابل مصادر كلّ كلمة رئيسية محدّدة. في حال تطبيق background-position: bottom 20% right 30% على background-image، يتم وضع background-image بنسبة% 20 من الأسفل و% 30 من يسار مربّع CSS.

يوضّح العرض التوضيحي التالي هذا السلوك:

في ما يلي المزيد من الأمثلة على استخدام السمة background-position باستخدام مزيج من قيم CSS والكلمات الرئيسية:

حجم الخلفية

Browser Support

  • Chrome: 3.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

تُستخدَم السمة background-size لضبط حجم صور الخلفية، ويتم ضبط حجمها تلقائيًا استنادًا إلى العرض والارتفاع ونسبة العرض إلى الارتفاع الأصلية (الفعلية).

تستخدِم السمة background-size طول CSS وقيم النسبة المئوية أو كلمات رئيسية محدّدة. يقبل السمة ما يصل إلى مَعلمتَين تتيحان لك تغيير عرض الخلفية وارتفاعها بشكل مستقل.

تقبل السمة background-size الكلمات الرئيسية التالية:

  • auto: عند استخدامها بشكل مستقل، يتم ضبط حجم صورة الخلفية استنادًا إلى العرض والارتفاع الأساسيَين لها. وعند استخدام auto مع قيمة أخرى في CSS للعرض (المَعلمة الأولى) أو الارتفاع (المَعلمة الثانية)، يتم ضبط حجم السمة التي تم ضبطها على auto حسب الحاجة للحفاظ على نسبة العرض إلى الارتفاع الطبيعية للصورة. هذا هو السلوك التلقائي لموقع background-size.
  • cover: تغطّي المنطقة بأكملها في طبقة الخلفية. قد يعني ذلك أنّه تم تصغير الصورة أو اقتصاصها.
  • contain: يغيّر حجم الصورة لملء المساحة بدون تمديدها أو قصها. نتيجةً لذلك، يمكن أن تبقى مساحة فارغة تؤدي إلى تكرار الصورة، ما لم يتم ضبط background-repeat على no-repeat.

ويتم استخدام المَعلمتَين الأخيرتَين بشكل مستقل بدون مَعلمة أخرى.

يوضّح العرض الترويجي التالي هذه الكلمات الرئيسية أثناء استخدامها:

عرض توضيحي يوضّح تطبيق هذه الكلمات الرئيسية على background-size:

إرفاق الخلفية

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

تتيح لك السمة background-attachment تعديل سلوك الموضع الثابت للصور في الخلفية (الصور التي تشكّل جزءًا من طبقة خلفية) بعد ظهور الطبقة على الشاشة.

يقبل هذا الحقل 3 كلمات رئيسية: scroll وfixed وlocal.

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

يؤدي استخدام القيمة fixed إلى تثبيت موضع صور الخلفية في إطار العرض.

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

تتيح الكلمة الرئيسية local تثبيت موضع صور الخلفية بالنسبة إلى محتوى العنصر. تتحرّك صور الخلفية الآن على طول المساحة التي تشغلها أثناء عرض هذه المساحة داخل حدود مربّع CSS وخارجه (عادةً بسبب الانتقال أو عمليات التحويل ثنائية أو ثلاثية الأبعاد).

مصدر الخلفية

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 3.

Source

تتيح لك سمة background-origin تعديل مساحة الخلفيات المرتبطة بمربّع معيّن. تتطابق القيم التي تقبلها السمة مع مناطق border-box وpadding-box وcontent-box في المربّع .

يمكنك تجربة هذه الخيارات باستخدام العرض الترويجي التالي:

مقطع صوتي في الخلفية

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

تتحكّم سمة background-clip في ما يظهر بشكل مرئي من طبقة الخلفية بغض النظر عن الحدود التي أنشأتها سمة background-origin.

مثل background-origin، المناطق التي يمكن تحديدها هي border-box وpadding-box وcontent-box، والتي تتوافق مع الأماكن التي يمكن فيها عرض طبقة خلفية في CSS. عند استخدام هذه الكلمات الرئيسية، سيتم اقتصاص أو قطع أيّ عرض للخلفية أبعد من المنطقة المحدّدة.

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

وهو موقع جديد نسبيًا، ويتطلّب Chrome ومعظم المتصفّحات استخدام البادئة -webkit- لاستخدام هذا الموقع.

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

خلفيات متعددة

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

يتم تحديد الخلفيات المتعدّدة من الأعلى إلى الأسفل، وتكون الخلفية الأولى هي الأقرب إلى المستخدم، في حين تكون الخلفية الأخيرة هي الأبعد عن المستخدم.

يُحدِّد المتصفّح طبقة الخلفية النهائية على أنّها الخلفية الوحيدة المحدَّدة أو الطبقة الأخيرة. يُسمح لهذه الطبقة فقط بتعيين background-color.

يمكن ضبط طبقات متعددة بشكلٍ فردي باستخدام معظم خصائص CSS ذات الصلة بالخلفية والتي تكون مفصولة بفواصل، كما هو موضّح في مقتطف الرمز التجريبي المباشر أدناه.

background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
    url("https://assets.codepen.io/7518/blob.svg"),
    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
  background-size: contain, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% 50%, 10% 50%, 0% 0%;
  background-origin: padding-box, border-box, content-box;

اختصارات الخلفية

لتسهيل تصميم طبقة الخلفية للصندوق، خاصةً عند الرغبة في استخدام طبقات خلفية متعددة، هناك اختصار يتّبع النمط المحدّد التالي:

background:
  <background-image>
  <background-position> / <background-size>?
  <background-repeat>
  <background-attachment>
  <background-origin>
  <background-clip>
  <background-color>?

من المهم ترتيب الخلفيات في التنسيق المختصر لتعريف الخلفيات المتعددة. يجب تقديم قيم الموضع والحجم معًا، مفصولة بشريط (/). يتيح لك تحديد موضع المصدر وسلوك المقطع بالترتيب الصحيح الاستفادة من ضبط كلمات رئيسية صالحة لكلاهما في الوقت نفسه.

يقطع البيان التالي الخلفية وينشئها من مربّع المحتوى:

background: url("https://assets.codepen.io/7518/blob.svg") 50%
      50% / contain no-repeat content-box;

مع أخذ هذه المعاني المختصرة في الاعتبار، يمكن إعادة كتابة التعريفات السابقة المتعلّقة بالخلفية في مقتطف الرمز البرمجي على النحو التالي:

background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;

التحقّق من فهمك

اختبِر معلوماتك حول الخلفيات في CSS

يتم وضع صور الخلفية في أعلى يمين مربّع CSS.

خطأ
صحيح

يتم تكرار صور الخلفية تلقائيًا.

صحيح
خطأ

أيّ من background-position الإقرارات التالية صالحة؟

background-position: top right 33%
background-position: left
background-position: right bottom
background-position: 50% left

لضبط صورة خلفية لتثبيتها ضمن مساحة عرض، يمكنك استخدام ما يلي:

background-attachment: fixed
background-position: fixed
background-fixed-to-viewport: true
background-attachment: scroll

القيمة التلقائية لمصدر الخلفية ضمن مربّع CSS هي:

border-box
margin-box
padding-box
content-box