في هذا الدرس 5تصفّح المواضيع
يتألف كل صندوق في CSS من طبقات متداخلة تبدأ من الهامش الخارجي ثم الإطار فالحشوة وصولاً إلى منطقة المحتوى في القلب. تحدد خاصية background-clip الحد الأقصى المسموح لطلاء لون الخلفية background-color أو صورتها background-image بالامتداد إليه، فتقص أي طلاء خارج تلك الحافة دون تغيير أبعاد العنصر في الصفحة.
يمنحك إتقان القيم القياسية الثلاث border-box و padding-box و content-box تحكماً بصرياً نظيفاً في مظهر الإطارات المنقطة والمزدوجة والبطاقات ذات الحواف المفرغة:
تطبّق المتصفحات القيمة الافتراضية background-clip: border-box على جميع العناصر تلقائياً؛ وهذا يعني أن لون الخلفية يمتد بالكامل تحت منطقة الإطار border حتى حافته الخارجية القصوى.
قد لا تلاحظ هذا الامتداد عندما يكون الإطار مصمتاً متصلاً بـ solid، لكنه يظهر جلياً فور استخدام إطارات متقطعة dashed أو منقطة dotted أو مزدوجة double حيث يطل لون الخلفية من بين فراغات الإطار:
.coupon-default {
padding: 16px;
border: 6px dashed #5b3894;
background-color: #ede9fe;
background-clip: border-box;
}يوقف التصريح background-clip: padding-box امتداد الخلفية تماماً عند الحافة الداخلية للإطار، فلا يتسرب لون البطاقة تحت شرطات الإطار المتقطع dashed أو نقاط dotted، مما يمنح قسائم الخصم ومناطق رفع الملفات حدوداً خارجية صافية ونظيفة.
قارن النتيجة بصرياً في الكود القابل للتجربة والمختبر التفاعلي لطبقات الصندوق أدناه:
.dropzone-clean {
padding: 18px;
border: 6px dashed #1d4ed8;
background-color: #dbeafe;
background-clip: padding-box;
}يحصر التصريح background-clip: content-box طلاء لون الخلفية وصورتها داخل مستطيل المحتوى الداخلي فقط، مع إبقاء حلقة الحشوة المحيطة padding مفرغة بلا لون؛ مما ينتج إطاراً داخلياً أنيقاً يشبه البراويز الفنية بعنصر HTML واحد دون الحاجة لإضافة حاويات إضافية:
.framed-card {
padding: 18px;
border: 3px solid #5b3894;
background-color: #f2ebf9;
background-clip: content-box;
}يخلط كثير من المتعلمين بين خاصيتي background-origin و background-clip لاشتراكهما في الكلمات المفتاحية الثلاث نفسها. والفرق الجوهري بسيط وحاسم: تحدد background-origin نقطة انطلاق تموضع الصورة فقط وقيمتها الافتراضية padding-box، بينما تحدد background-clip حدود قص وطلاء اللون والصورة معاً وقيمتها الافتراضية border-box:
| وجه المقارنة | خاصية background-origin | خاصية background-clip |
|---|---|---|
| الوظيفة الهندسية | نقطة بداية إحداثيات background-image | الحد الأقصى لقص طلاء اللون والصورة |
هل تؤثر في background-color؟ | لا، تخص الصور فقط | نعم، تقص الألوان والصور معاً |
| القيمة الافتراضية | padding-box | border-box |
في الاختصار background | الكلمة الصندوقية الأولى تضبط الأصل | الكلمة الصندوقية الثانية تضبط القص |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس ضبط حدود طلاء الخلفية عبر القيم الثلاث border-box و padding-box و content-box والتمييز الدقيق بين قص الخلفية ونقطة أصل تموضع الصورة. وفي الخطوة التالية سننتقل إلى درس الزوايا المدورة في لغة CSS لتشكيل منحنيات الأركان الفردية والبيضاوية باحترافية.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Painting Area منطقة طلاء الخلفية
- المساحة المحددة من طبقات الصندوق التي يُسمح للون الخلفية وصورتها بالظهور داخل حدودها.
- للمراجعة
- 02 Border Box Clip الامتداد لحافة الإطار
- السلوك الافتراضي الذي يمد طلاء الخلفية تحت كامل منطقة الإطار حتى حافته الخارجية.
- للمراجعة
- 03 Padding Box Clip القص عند حدود الحشوة
- إيقاف طلاء الخلفية قبل منطقة الإطار مباشرة لمنع تسرب اللون خلف الشرطات والنقاط.
- للمراجعة
- 04 Content Box Clip حصر الطلاء بالمحتوى
- قصر طلاء الخلفية على مستطيل المحتوى الداخلي مع ترك مساحة الحشوة المحيطة خالية من اللون.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 BG BG
- Background Layer
- طبقة الخلفية البصرية التي يرسمها المتصفح خلف نص العنصر وتحت خطوط إطاره.
- للمراجعة
- 02 CSS CSS
- Cascading Style Sheets
- معيار تنسيق صفحات الويب الذي تحدد وحدة الخلفيات والإطارات فيه قواعد قص الخلفية.
- للمراجعة
- 03 W3C W3C
- World Wide Web Consortium
- رابطة الويب العالمية المسؤولة عن توثيق معايير ترتيب الطلاء وطبقات الصندوق.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
غيّر قيمة background-clip من border-box إلى padding-box على بطاقة ذات إطار متقطع وراقب نقاء فراغات الإطار.
-
ادمج حشوة بمقدار 18px مع إطار متصل وقيمة content-box لملاحظة بقاء حلقة الحشوة خالية من لون الخلفية.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.