الخلفيات

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

الخلفيات

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

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

لون الخلفية

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

صور الخلفية

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

موضع الخلفية

لعلك لاحظت أنّ بعض الصور على الويب مصمّمة ببيان 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;

  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