انتقل إلى محتوى الدرس

Background Clip Painting Boundary مفهوم حدود طلاء وقص الخلفية

أتقن خاصية حدود قص الخلفية background-clip في لغة CSS للتحكم بامتداد لون الخلفية أو صورتها تحت الإطار أو إيقافها عند حدود الحشوة أو حصرها داخل منطقة المحتوى فقط.
3 صفوف تعليمية
لغة CSS
3,119 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يتألف كل صندوق في CSS من طبقات متداخلة تبدأ من الهامش الخارجي ثم الإطار فالحشوة وصولاً إلى منطقة المحتوى في القلب. تحدد خاصية background-clip الحد الأقصى المسموح لطلاء لون الخلفية background-color أو صورتها background-image بالامتداد إليه، فتقص أي طلاء خارج تلك الحافة دون تغيير أبعاد العنصر في الصفحة.

يمنحك إتقان القيم القياسية الثلاث border-box و padding-box و content-box تحكماً بصرياً نظيفاً في مظهر الإطارات المنقطة والمزدوجة والبطاقات ذات الحواف المفرغة:

الصف 2 صورة توضيحية
مخطط يقارن حدود قص الخلفية بين حافة الإطار وحدود الحشوة ومنطقة المحتوى داخل طبقات الصندوق
الصف 3 ملاحظة هامة