نيكيلاو » أرشيف المدونة » خلفيات متعددة الصور باستخدام CSS 3

» أرشيف المدونة » خلفيات متعددة الصور باستخدام CSS 3 Niquelao خلفيات متعددة الصور باستخدام CSS 3 25 نوفمبر 2009، بقلم Rumoroso من بين الميزات الجديدة التي يقدمها CSS 3 (والتي أراها مرحبًا بها شخصيًا) هي إمكانية تضمين صور خلفية متعددة لنفس العنصر ( http://www.w3.org/TR/css3-background/#layering ). حتى الآن، إذا أردنا دمج أكثر من صورة كخلفية، كان كل ما يمكننا فعله هو استخدام أحد العناصر الموجودة في صفحتنا، وتطبيق خلفية على كل منها للحصول على النتيجة المرجوة. بل في بعض الأحيان، كنا نستخدم ترميزًا إضافيًا، مما يقلل من جودة الموقع بإضافة ترميز لأغراض عرضية فقط. لكن الآن تغير الوضع… بفضل CSS 3، إذا أردنا استخدام صورتين أو أكثر كخلفية، يمكننا إضافة مسار كل صورة إلى خاصية background-image: مع فصلها بفواصل. على سبيل المثال: background-image: url(‘fondo1.png’), url(‘fondo2.png’) بمثل هذا الشيء البسيط، نكون قد أعلنا ما يلزم ليكون للعنصر الذي نطبقه عليه الصورتان كخلفية. بالطبع، من هذه النقطة تظهر أسئلة جديدة… هل تتراكب مع بعضها البعض؟ هل يمكن تحديد مواضعها في أماكن مختلفة؟ هل يمكن تكرار إحداها على محور ومنع الأخرى من ذلك؟ … …وجميعها إجابتها نعم . فيما يتعلق بالتراكب، الصورة الأولى التي يتم الإعلان عنها هي التي توضع الأقرب للمستخدم . بعدها وخلفها، توضع الصورة التالية (على محور عمودي على الشاشة)، ثم التالية، وهكذا حتى الأخيرة، التي ستكون خلف الجميع. الأمر كما لو أن كل صورة توضع في طبقة . وإذا أعلنا أيضًا لون خلفية، فسيوضع خلف جميع الصور المستخدمة. أما بقية الأسئلة، يمكنني تعميم الإجابة، لأنها جميعًا نشأت عند التفكير في الخصائص التي نستخدمها عادةً، أي موضع صورة الخلفية ( background-position )، والسلوك عند التمرير ( background-attachment )، والتكرار ( background-repeat ). إذا أردنا أن يكون لكل صورة قيمة محددة، علينا فقط الإعلان عنها تباعًا مع فصلها بفواصل (كما فعلنا عند الإعلان عن الصور نفسها). على سبيل المثال: background-image: url(‘fondo1.png’), url(‘fondo2.png’), url(‘fondo3.png’); background-position: 0 0, 150px 200px, left center; background-repeat: no-repeat, repeat-x, no-repeat; بهذا نعلن عن ثلاث صور كخلفية، الأولى ستوضع في الأعلى إلى اليسار، والثانية ستتحرك إلى اليمين 150px وإلى الأسفل 200px، والثالثة ستوضع أيضًا على اليسار ومتمركزة عموديًا. فيما يتعلق بالتكرار، الأولى والأخيرة لن تتكررا والثانية ستتكرر على المحور الأفقي. لكن الموضوع لا ينتهي هنا. لمن يحبون تحسين الكود (وعلينا جميعًا أن نكون كذلك)، يمكن اختصار بعض الإعلانات: background-position: 0 0, 150px 200px, left center; تصبح: background-position: 0 0, 150px 200px, left; يتم حذف كلمة center . كما نعلم جميعًا (أو يجب أن نعلم)، عندما لا يتم الإعلان عن إحدى قيم موضع الخلفية، فإن القيمة الافتراضية التي تأخذها هي التمركز ( center )، في هذه الحالة عموديًا. background-repeat: no-repeat, repeat-x, no-repeat; تصبح: background-repeat: no-repeat, repeat-x; يمكن حذف القيمة الثالثة. السبب هو أنه عند غياب القيم، تتكرر قائمة القيم المعلنة بالفعل حتى يكون هناك قيمة واحدة لكل صورة (ولهذا إذا بدأت قائمة القيم من جديد، تكون الأولى no-repeat ). لكن يمكن تحسينها أكثر، بالاستفادة من الخاصية المختصرة background: : background: url(‘fondo1.png’) 0 0 no-repeat, url(‘fondo2.png’) 150px 200px repeat-x, url(‘fondo3.png’) left no-repeat; كما سترون، كل هذا يفتح آفاقًا من الاحتمالات لتصاميمنا. بعض المتصفحات، في إصداراتها الحالية، بدأت تدعم خلفيات متعددة الصور. من بينها Firefox (ابتداءً من الإصدار 3.6)، و Chrome ، و Safari ، و Konqueror . إذا كنتم تستخدمون أحدها، يمكنكم رؤية النتيجة في المثال الذي أعددته . وللأسف الشديد، لا يوجد دعم بعد في Internet Explorer (سنرى إن كانوا سيضمونه في إصدارهم القادم 9) ولا في Opera. فيما يلي أدرج لكم لقطة شاشة لما يظهر في المثال عندما يكون هناك دعم (إذا دخلتم بمتصفح بدون دعم، لن تروا سوى الحد المنقط): بصرف النظر عما ذُكر، يتضمن CSS 3 أيضًا قيمًا جديدة لبعض الخصائص المذكورة، بالإضافة إلى خصائص جديدة ستمنح تصاميمنا مرونة كبيرة. في مقال قادم سأتناولها بالتفصيل. وللتحفيز أذكر لكم background-size … نعم، إنه ما تفكرون فيه! ملاحظة: أفترض أنه بصرف النظر عن المحتوى التقني للمقال، فإن أكثر ما يثير الشهية هو كعكة الصورة . حسنًا، لأجعلكم تشعرون بقليل من الحسد سأخبركم أن الصورة التقطتها أنا وهي كعكة فواكه أعدتها لي Dolores… من الواضح أنها أيضًا تتقن موضوع التحكم في العرض، لكنني أؤكد لكم أيضًا أنها تتقن إدارة المحتوى، فقد كانت لذيذة… خلفيات متعددة الصور باستخدام CSS 3 الفئة: CSS —> 4 تعليقات خلفيات متعددة الصور باستخدام CSS 3 26 نوفمبر 2009 […] الآن تغير الوضع… خلفيات متعددة الصور باستخدام CSS 3 […] تغريدات تذكر Niquelao » أرشيف المدونة » خلفيات متعددة الصور باستخدام CSS3 — Topsy.com 27 نوفمبر 2009 […] تم ذكر هذا المقال على تويتر بواسطة Jorge Rumoroso، Juanjo Fernández. قال Juanjo Fernández: RT @rumoroso: #niquelao خلفيات متعددة الصور باستخدام CSS 3 http://bit.ly/4YqcJ2 #CSS3 […] Niquelao » أرشيف المدونة » CSS 3: خصائص الخلفية 2 ديسمبر 2009 […] دعم في أحدث إصدارات المتصفحات (كما ذكرت سابقًا في التدوينة بعنوان خلفيات متعددة الصور باستخدام CSS 3)، ويُضمَّن في بعض الحالات بشكل تجريبي (على سبيل المثال في Firefox عبر البادئة […] Niquelao » أرشيف المدونة » المزيد عن CSS 3: background-origin و background-clip 13 ديسمبر 2009 […] كما شرحت في مقال آخر، مع CSS 3 يمكننا تضمين أكثر من صورة خلفية. الخاصيتان background-origin و background-clip تقبلان تضمين قيمة لكل […] يمكنك متابعة التعليقات عبر خلاصة RSS 2.0 . يمكنك أيضًا إرسال trackback من موقعك. المقال السابق: لمسة أخرى من الأناقة في دورة CSS المقال التالي: CSS 3: خصائص الخلفية —> —> —> هذا العمل مرخص بموجب رخصة 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.