نيكيلاو » أرشيف المدونة » المزيد عن CSS 3: background-origin وbackground

» أرشيف المدونة » المزيد عن CSS 3: background-origin و background-clip Niquelao المزيد عن CSS 3: background-origin و background-clip 13 من ديسمبر 2009، بقلم Rumoroso نواصل استعراضنا لمختلف خصائص CSS 3 التي ستتحكم في خلفياتنا، والآن يأتي دور background-origin و background-clip . هاتان الخاصيتان جاءتا لمساعدتنا في التحكم في الأصل الذي سنحدد نسبةً إليه موضع صور الخلفية، وكذلك إمكانية عرضها أسفل الحدود. background-origin يحدد الأصل الذي انطلاقًا منه يُحسب موضع الخلفية، أي أصل الإحداثيات الخاصية background-position . قيمه الممكنة هي: border-box : يُحدد موضع الخلفية بالنسبة للمنطقة التي تشمل الحدود (وهذا يعني أنه إذا كانت الحدود متقطعة، فقد تظهر الخلفية أسفلها). padding-box : هي القيمة الافتراضية وتحدد موضع الخلفية بالنسبة للمنطقة التي تشمل الحشوة (وهو ما يعادل الوضع الحالي في CSS 2.1). content-box : تُوضع الخلفية بالنسبة لمنطقة المحتوى. background-clip يحدد المنطقة التي ستُعرض فيها الخلفية ويقبل قيمتين محتملتين: border-box : هي القيمة الافتراضية وتشمل الخلفية في المنطقة التي تشغلها الحدود. padding-box : تحصر المنطقة التي ستُعرض فيها الخلفية في المنطقة التي تشغلها الحشوة والمحتوى، أي أنه حتى لو كان أصل الخلفية عند الحدود، فلن تظهر الصورة أسفلها. الشرح كما هو الحال دائمًا، أفضل طريقة هي اللجوء إلى أمثلة على شكل لقطات لشرح كلتا الخاصيتين. فيها حاكيت المساحة التي يشغلها عنصر (مع احترام نموذج الصندوق)، أي الحدود (خط رمادي منقّط سميك)، والحشوة (المسافة بين الحدود والخط المتقطع الرفيع)، والمحتوى (المحدد بالخط المتقطع). لنبدأ: ما الفرق بين الزوج التالي من الصور؟ من الواضح أن الفرق بينهما يكمن في أن إحداهما تُظهر الخلفية أسفل الحدود، بينما الأخرى لا تفعل ذلك. كود CSS للأولى هو: background-origin: border-box; background-clip: border-box; …وللثانية: background-origin: border-box; background-clip: padding-box; والآن، ما الفرق بين الصورتين التاليتين؟ الآن الفرق يكمن في أصل الخلفية. في الأولى، يشمل الأصل الحدود: background-origin: border-box; …بينما في الثانية يكون في الحشوة: background-origin: padding-box; أخيرًا، ما الفرق الآن؟ : مرة أخرى الأمر واضح. الصورة الأولى، مثل الأولى في زوج الأمثلة السابق، أصل الخلفية فيها هو منطقة الحدود، بينما الثانية فأصلها في منطقة المحتوى: background-origin: border-box; و background-origin: content-box; إذا كان متصفحك إصدارًا حديثًا من Firefox أو Chrome أو Safari أو Konqueror ، فيمكنك الوصول إلى الصفحة التي تحتوي على مثال لتطبيق كلتا الخاصيتين . وإذا كنت تستخدم متصفحًا آخر (مثل Internet Explorer أو Opera) فيمكنك أيضًا الوصول إلى المثال، وإن كان ذلك في هذه الحالة لرؤية النتيجة عندما لا تكون هاتان الخاصيتان مدعومتين. ملاحظة: تدعم Mozilla و WebKit هاتين الخاصيتين بشكل تجريبي بصيغتيهما الخاصتين. وكما شرحت سابقًا في مقال آخر، مع CSS 3 سنتمكن من تضمين أكثر من صورة خلفية واحدة . تدعم الخاصيتان background-origin و background-clip تضمين قيمة لكل صورة من الصور المستخدمة. وفي الختام، سأعلّق مرة أخرى على الصورة المستخدمة كخلفية في الأمثلة. إنها كعكة فواكه شهية أعدّتها Dolores والتي ربحتها لأنني كنت جيدًا… حسنًا، ربحتها ببساطة… في الواقع، لم أربحها، لكنني استمتعت بها كطفل المزيد عن CSS 3: background-origin و background-clip الفئة: CSS —> تعليق واحد Tweets that mention Niquelao » أرشيف المدونة » المزيد عن CSS 3: background-origin و background-clip — Topsy.com 14 من ديسمبر 2009 […] أُشير إلى هذا المقال على Twitter من Jorge Rumoroso و Juanjo Fernández. قال Juanjo Fernández: RT @rumoroso: #niquelao المزيد عن CSS 3: background-origin و background-clip http://bit.ly/5wKoQt #CSS3 […] يمكنك متابعة التعليقات بفضل خلاصة RSS 2.0 . كما يمكنك إرسال trackback من موقعك. المقال السابق: قائمة عين السمكة باستخدام CSS Transform و Transition فقط —> —> —> هذا العمل مرخّص بموجب رخصة Creative Commons .

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.