خاصية قص الخلفية
آخر تحديث: 2026-09-13
background-clip خاصية قص الخلفية
تتحكم الخاصية background-clip في منطقة رسم الخلفية، وتُقرر ضمن أي منطقة من نموذج الصندوق (box model) يُعرض الخلفية (لونًا كان أو صورة). القيمة الافتراضية border-box تمد الخلفية تحت الحدود، وpadding-box تقتصها إلى منطقة الحشو، وcontent-box تعرضها فقط في منطقة المحتوى. وأضاف CSS3 أيضًا القيمة text لتأثيرات قص النص.
| الفئة | |
|---|---|
| القيمة الأولية | border-box |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | discrete |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
background-clip: border-box | padding-box | content-box | text;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
border-box | padding-box | content-box | text | كلمة مفتاحية | منطقة رسم الخلفية |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-clip | ✓ v4 | ✓ v12 | ✓ v4 | ✓ v3.1 | ✓ v10 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يكون الفرق بين border-box وpadding-box أوضح عند استخدام حدود شفافة أو متقطعة.
مهم： يتطلب background-clip: text استخدام -webkit-text-fill-color: transparent لإظهار تأثير قص النص.
❓ الأسئلة الشائعة
Qما الفرق بين background-clip وbackground-origin؟
Aيتحكم clip في المكان الذي يتوقف عنده رسم الخلفية (حد القص)، بينما يتحكم origin في نقطة المرجع لتموضع صورة الخلفية. فمثلًا clip: border-box يسمح للخلفية بالامتداد تحت الحدود، في حين يموضع origin: border-box الصورة من الزاوية العلوية اليسرى للحدود. أما background-color فتتأثر فقط بـ clip؛ وorigin لا يُطبَّق إلا على صور الخلفية.
Qكيف أنشئ تأثير نص متدرّج؟
Aثلاث خطوات: اضبط التدرّج اللوني بـ background-image؛ واقص الخلفية إلى محيط النص بـ background-clip: text؛ واجعل تعبئة النص شفافة عبر -webkit-text-fill-color: transparent. وأضف أيضًا background-repeat: no-repeat حتى لا يتكرر التدرّج كلوحات.
Qماذا يفعل كل من قيم background-clip الثلاث؟
Aborder-box (الافتراضي): يمتد الخلفية إلى منطقة الحدود، وتُرسم الحدود فوقها. padding-box: يظهر الخلفية فقط داخل منطقة الحشو، دون خلفية تحت الحدود. content-box: تظهر الخلفية في منطقة المحتوى فقط، لذا لا خلفية حتى في منطقة الحشو. أضف حدودًا لعنصر وقارن — الحدود الشفافة أو المتقطعة تُبرز الفرق بوضوح.
Qما دعم المتصفحات لـ background-clip: text؟
Aتدعم جميع المتصفحات الحديثة background-clip: text، لكن Safari/Chrome القديمة تحتاج إلى بادئة -webkit-background-clip: text مضافة إلى -webkit-text-fill-color: transparent. حيث لا يوجد دعم، يعود النص إلى لون تعبئة عادي، لذا من الجيد توفير بديل عبر @supports.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
