إن مقطع الخلفية وأصل الخلفية هما خصائص وحدة خلفية جديدة تمت إضافتها في CSS3، وتستخدم لتحديد موضع الخلفية.
يتم استخدام مقطع الخلفية لتحديد ما إذا كانت الخلفية تحتوي على منطقة الحدود. ويتم استخدام أصل الخلفية لتحديد الموضع المرجعي لحساب موضع الخلفية.
بناء الجملة هو:
مقطع الخلفية: [حشوة الحدود] [، [حشوة الحدود]]* |
لمقطع الخلفية:
إذا كانت قيمة حشوة، فإن الخلفية تتجاهل حواف الحشو وتكون الحدود شفافة. إذا كانت قيمة حدود، فستتضمن الخلفية منطقة الحدود. إذا كان هناك عدة صور خلفية، فسيتم فصل قيم مقطع الخلفية المقابلة بفواصل.
لأصل الخلفية:
إذا كانت قيمة حشوة، فإن الموضع يكون متعلقًا بحافة الحشو ("0 0" هي الزاوية اليسرى العليا لحافة الحشو، و"100% 100%" هي الزاوية اليمنى السفلية). إذا كانت قيمة حدودية، فهذا يعني حافة الحدود النسبية. قيمة الحدود مرتبطة بحافة المحتوى. مثل مقطع الخلفية، يتم فصل القيم المتعددة بفواصل. إذا كان مقطع الخلفية هو قيمة الحشو، وأصل الخلفية هو قيمة الحد، وموضع الخلفية هو "أعلى اليسار" (القيمة الأولية الافتراضية)، فسيتم قطع الزاوية اليسرى العليا من صورة الخلفية.
تظهر هاتان السمتان فقط في CSS3. ماذا عن السلوك الافتراضي في وحدة الخلفية عند عدم استخدام هذه السمة؟
| يتم تعيين مقطع الخلفية افتراضيًا على شيء مثل مقطع الخلفية: الحدود. يتم تعيين خلفية الأصل الافتراضية على شيء مثل خلفية الأصل: الحشو. |
لكن IE حالة خاصة (إنها سيئة).
في IE6 وIE7، تكون خلفية العناصر العامة (باستثناء الأزرار، وما إلى ذلك) مكافئة لـ: border-clip:border;
خلفية عناصر hasLayout (الأزرار الإضافية، وما إلى ذلك) تعادل: الخلفية مقطع: الحشو خلفية الأصل: الحشو؛
تم تنفيذ هذا الزوج من خصائص CSS3 في متصفحات مثل Mozilla وSafari 3 وKonqueror، ولكن تم التعبير عنها جميعًا من خلال خصائصها الخاصة.
تبدأ السمات الخاصة للمتصفحات الأساسية غير التابعة لـ IE عادةً بـ -xxx-، و -o- خاص لـ Opera مع Presto كمحرك، و -icab- خاص لـ iCab، و -khtml- هو المتصفح الذي يستخدم KHTML كمحرك. (مثل Konqueror Safari)، -moz- هو متصفح يعتمد على محرك Mozilla's Gecko (مثل Firefox وMozilla)، -webkit- هو متصفح (مثل Safari وSwift) يعتمد على محرك عرض Webkit (مشتق من KHTML) ) .
أي أن السمات الخاصة المدعومة هي:
| -moz-خلفية مقطع -webkit-خلفية مقطع -khtml-مقطع الخلفية -moz-الخلفية-الأصل -webkit-background-origin -khtml-الخلفية-المنشأ |
فيما يلي مثال بسيط لاستخدام سمة أصل الخلفية، ويكون التأثير كما يلي:
كود HTML:
كود CSS:
زر { border:3px double #95071b;/*استخدم حدود مزدوجة 3px لمحاكاة الخط الأبيض في التصميم*/ لون الخلفية:#95071b; /*تعيين طريقة قص الخلفية والخطوط الإرشادية*/ -moz-background-origin:padding; /*متوافق مع الأمام*/ اللون: #ففف؛ /*إصلاح مشكلة الارتفاع ضمن IE6*/ |
العيوب: لا يمكن تحقيق هذا التأثير في ظل Opera. بالطبع، هذا مجرد حل لأولئك المهووسين بكود HTML (يقتصر على تعلم وفهم سمات مقطع الخلفية وأصل الخلفية). بالطبع، يمكنك أيضًا تجربة طرق أخرى، مما قد يجعل CSS أكثر إيجازًا أما بالنسبة لمزايا الطرق المختلفة فإن عيوبها متروكة لك لتزنها.