الخلفيات

بودكاست CSS - 053: الخلفية

الخلفيات

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

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

لون الخلفية

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

صور الخلفية

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

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

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

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

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

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

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

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

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

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

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

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

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

يحتوي الاختصار أيضًا على خيارات ملائمة من كلمة واحدة لجعل هدفك أكثر وضوحًا.

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

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

موضع الخلفية

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

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

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

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

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

background-position: left 50%;

background-position: top left;

background-position: left top;

  background-position: 50% left;

  background-position: left right;

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

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

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

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

background-position: bottom 88% right;

background-position: right bottom 88%;

background-position: 88% bottom right;

background-position: bottom 88% right 33%;

background-position: right 33% bottom 88%;

background-position: 88% 33% bottom left;

في حال تطبيق 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% على صورة خلفية، يتم وضع صورة الخلفية بنسبة% 20 من الجزء السفلي و% 30 من يسار مربّع CSS.

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

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

حجم الخلفية

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

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

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

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

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

ويوضح العرض التوضيحي التالي هذه الكلمات الرئيسية بشكل عملي:

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

مرفق خلفية

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

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

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

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

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

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

أصل الخلفية

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

جرّب هذه الخيارات باستخدام العرض التوضيحي التالي:

مقطع في الخلفية

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

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

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

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

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

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

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

يتم تحديد الطبقة الوحيدة المحددة أو الأخيرة باعتبارها طبقة الخلفية النهائية من قِبل المتصفح. يُسمح لهذه الطبقة فقط بتعيين 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