The CSS Podcast - 053: Background
خلف كل مربّع CSS، تتوفّر طبقة مخصّصة تُسمّى طبقة الخلفية. توفّر CSS مجموعة متنوعة من الطرق لإجراء تغييرات مفيدة عليها، بما في ذلك السماح بخلفيات متعددة.
تكون طبقات الخلفية أبعد ما يكون عن المستخدم، ويتم عرضها خلف محتوى المربّع بدءًا من منطقة padding-box
. يتيح ذلك لطبقة الخلفية عدم التداخل مع الحدود على الإطلاق.
لون الخلفية
من أبسط التأثيرات التي يمكنك تطبيقها على طبقة الخلفية هو ضبط اللون. القيمة الأولية لـ background-color
هي transparent
، ما يسمح بظهور محتوى العنصر الرئيسي. يظهر اللون الصالح الذي تم ضبطه في طبقة الخلفية خلف الأشياء الأخرى المرسومة على هذا العنصر.
صور الخلفية
يمكنك إضافة صورة خلفية على طبقة background-color
باستخدام السمة background-image
. يقبل "background-image
" ما يلي:
- عنوان URL للصورة أو عنوان URL للبيانات باستخدام دالة CSS
url
- صورة تم إنشاؤها ديناميكيًا باستخدام دالة CSS متدرّجة.
ضبط صورة خلفية باستخدام دالة CSS url
الخلفيات المتدرّجة باستخدام 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
وضع الصور على طول محورَي 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
أيضًا ما يصل إلى أربع مَعلمات:
عند استخدام ثلاث مَعلمات أو أربع مَعلمات، يجب أن تسبق الكلمة الرئيسية 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;
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%
على background-image، يتم وضع background-image بنسبة% 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
يتم وضع صور الخلفية في أعلى يمين مربّع CSS.
يتم تكرار صور الخلفية تلقائيًا.
أيّ من background-position
الإقرارات التالية صالحة؟
background-position: 50% left
background-position: left
background-position: top right 33%
background-position: right bottom
لضبط صورة خلفية لتثبيتها ضمن مساحة عرض، يمكنك استخدام ما يلي:
background-position: fixed
background-fixed-to-viewport: true
background-attachment: scroll
background-attachment: fixed
القيمة التلقائية لمصدر الخلفية ضمن مربّع CSS هي:
margin-box
content-box
border-box
padding-box