خلفية مزدوجة. كيفية عمل عدة صور خلفية CSS. رمز المثال: صور متعددة للخلفية

نظرًا لراحتها وتعدد استخداماتها ، من أجل تمييزها عن بقية العناصر ، تمت إضافة فئة الكتلة إليها (مثال 1).

مثال 1. صورتان للخلفية

HTML5 CSS3 IE Cr Op Sa Fx

تظهر نتيجة هذا المثال في الشكل. 3.

). اليوم سنتحدث قليلاً عن ميزة أخرى مثيرة للاهتمام - استخدام صور متعددة في الخلفية.

تكوين الخلفيات

هناك العديد من الأسباب التي قد تدفعك عمومًا إلى تكوين عدة صور في الخلفية ، من أهمها:

• توفير حركة المرور على حجم الصور ، إذا كانت الصور الفردية معًا تزن أقل من الصورة ذات الطبقات المسطحة ، و
• الحاجة إلى سلوك مستقل للطبقات الفردية ، على سبيل المثال ، عند تنفيذ تأثيرات اختلاف المنظر.

قد تكون هناك أسباب أخرى معقولة :)

النهج الكلاسيكي

لذلك ، نحتاج إلى وضع عدة صور للخلفية واحدة فوق الأخرى. كيف يتم حل هذه المهمة عادة؟ الأمر بسيط للغاية: يتم إنشاء كتلة لكل صورة خلفية ، ويتم تخصيص صورة الخلفية المقابلة لها. تكون الكتل إما متداخلة مع بعضها البعض أو توضع في صف بقواعد تحديد الموضع المناسبة. إليك مثال بسيط:

بلوك مع فئة "الصيد" داخل "حورية البحر" لأغراض توضيحية فقط.

الآن بعض الأنماط:
.sample1 .sea، .sample1 .mermaid، .sample1. .sample1 .mermaid (الخلفية: url (media / mermaid.svg) كرر x أسفل اليسار ؛). عينة 1. سمك (الخلفية: url (media / fish.svg) بدون تكرار ؛ الارتفاع: 70 بكسل ؛ العرض: 100 بكسل ؛ اليسار : 30 بكسل ؛ أعلى: 90 بكسل ؛ الموضع: مطلق ؛) .sample1. الصيد (الخلفية: url (media / fishing.svg) عدم التكرار أعلى اليمين 10 بكسل ؛)

نتيجة:

في هذا المثال ، توجد ثلاث خلفيات متداخلة وكتلة واحدة بها أسماك ، وتقع بجوار كتل "الخلفية". من الناحية النظرية ، يمكن نقل الأسماك ، على سبيل المثال ، باستخدام JavaScript أو CSS3 Transitions / Animations.

بالمناسبة ، يستخدم هذا المثال الصيغة الجديدة لتحديد الموضع في الخلفية لـ ".fishing" ، المعرف أيضًا في CSS3:
الخلفية: url (media / fishing.svg) بدون تكرار أعلى اليمين 10 بكسل ؛
إنه مدعوم حاليًا في IE9 + و Opera 11+ ، ولكنه غير مدعوم في Firefox 10 و Chrome 16. لذلك لن يتمكن مستخدمو آخر متصفحين من صيد سمكة حتى الآن.

خلفيات متعددة

تأتي ميزة جديدة تمت إضافتها في CSS3 للإنقاذ - وهي القدرة على تحديد صور خلفية متعددة لعنصر واحد في وقت واحد. تبدو هكذا:

والأنماط المقابلة:
.sample2 .sea (الارتفاع: 300 بكسل ؛ العرض: 480 بكسل ؛ الموضع: نسبي ؛ صورة الخلفية: url ("media / Fishing.svg") ، url ("media / mermaid.svg") ، url ("media / sea. png. ") عدم التكرار ؛ الارتفاع: 70 بكسل ؛ العرض: 100 بكسل ؛ اليسار: 30 بكسل ؛ الجزء العلوي: 90 بكسل ؛ الموضع: مطلق ؛)
لتعريف صور متعددة ، يجب استخدام قاعدة صورة الخلفية ، التي تسرد الصور الفردية مفصولة بفواصل. يمكن استخدام قواعد إضافية ، قائمة أيضًا ، لتعيين تحديد المواقع والتكرار والمعلمات الأخرى لكل صورة. انتبه إلى الترتيب الذي يتم به سرد الصور: يتم سرد الطبقات من اليسار إلى اليمين من الأعلى إلى الأسفل.

النتيجة هي نفسها تمامًا:

قاعدة واحدة

إذا لم تكن السمكة بحاجة إلى التحديد في كتلة منفصلة للمعالجة اللاحقة ، فيمكن إعادة كتابة الصورة بأكملها بقاعدة واحدة بسيطة:

الأنماط:
.sample3 .sea (الارتفاع: 300 بكسل ؛ العرض: 480 بكسل ؛ الموضع: نسبي ؛ صورة الخلفية: url ("media / Fishing.svg") ، url ("media / mermaid.svg") ، url ("media / fish. svg ") ، url (" media / sea.png ") ؛ موضع الخلفية: أعلى اليمين 10 بكسل ، أسفل اليسار ، 30 بكسل 90 بكسل ، أعلى اليسار ؛ تكرار الخلفية: عدم التكرار ، تكرار x ؛)

لن أعطي صورة مع النتيجة - صدقوني ، إنها تتزامن مع الصورتين أعلاه. لكن انتبه إلى الأنماط مرة أخرى ، خاصةً "تكرار الخلفية" - وفقًا للمواصفات ، إذا كان جزء من القائمة في النهاية مفقودًا ، فيجب على المتصفح تكرار القائمة المحددة عدة مرات حسب الضرورة لمطابقة الرقم من الصور في القائمة.

في هذه الحالة ، يكون مكافئًا لهذا الوصف:
تكرار الخلفية: لا تكرار ، تكرار x ، لا تكرار ، كرر س;

حتى أقصر

إذا كنت تتذكر CSS 2.1 ، فإنها تحدد القدرة على وصف صور الخلفية بطريقة موجزة. ماذا عن الصور المتعددة؟ من الممكن أيضًا:

Sample4 .sea (الارتفاع: 300 بكسل ؛ العرض: 480 بكسل ؛ الموضع: نسبي ؛ الخلفية: url ("media / Fishing.svg") أعلى اليمين 10 بكسل بدون تكرار ، url ("media / mermaid.svg") أسفل اليسار تكرار x ، url ("media / fish.svg") 30 بكسل 90 بكسل بدون تكرار، url ("media / sea.png") تكرار x؛)

لكن لاحظ أنه لا يمكنك الآن تخطي القيم فقط (ما لم تتطابق مع القيم الافتراضية). بالمناسبة ، إذا كنت تريد تعيين لون صورة الخلفية ، فيجب أن يتم ذلك في الطبقة الأخيرة.

صور ديناميكية

إذا كان التكوين ثابتًا أو ديناميكيًا ليس أكثر من اعتمادًا على حجم الحاوية ، فمن الواضح أن الخلفيات المتعددة تبسط تصميم الصفحة. ولكن ماذا لو كنت بحاجة إلى العمل مع العناصر الفردية للتكوين بشكل مستقل عن جافا سكريبت (تحريك ، تمرير ، إلخ)؟

بالمناسبة ، إليك مثال من واقع الحياة - موضوع بهندباء في Yandex:


إذا بحثت في الكود ، فسترى شيئًا مثل هذا:

...

تحتوي الكتل التي تحتوي على فئات "b-fluff-bg" و "b-fluff__cloud" و "b-fluff__item" على صور خلفية تتداخل مع بعضها البعض. علاوة على ذلك ، تتحرك الخلفية مع السحب باستمرار ، وتطير الهندباء عبر الشاشة.

هل يمكن إعادة كتابة هذا باستخدام خلفيات متعددة؟ من حيث المبدأ ، نعم ، ولكن بشرط 1) دعم هذه الميزة في المتصفحات المستهدفة و ... 2) واصل القراءة ؛)

كيف أقوم بإضافة مكبرات الصوت إلى خلفيات متعددة؟ في مثل هذه الحالة ، من الملائم أن يقوم المتصفح في العرض الداخلي بتشتيت المعلمات الفردية لصورة الخلفية وفقًا للقواعد المناسبة. على سبيل المثال ، لتحديد الموضع ، يوجد "موضع الخلفية" ، وبالنسبة للتعويضات ، ما عليك سوى تغييره. ومع ذلك ، هناك رسوم مقابل استخدام صور متعددة - يجب أن تسرد هذه القاعدة (وأي قاعدة مماثلة) موضع جميع الخلفيات المعينة لحجبتك ، ولا يمكنك القيام بذلك بشكل انتقائي.

لإضافة الرسوم المتحركة إلى خلفيتنا مع الأسماك ، يمكنك استخدام الكود التالي:
$ (مستند). t = 0 ؛ وظيفة الرسوم المتحركةLoop () (fishesY = 90 + Math.floor (30 * Math.sin (t ++ / 180.0)) ؛ if (- fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) ميرميد إكس = 0 ؛ fishY = -10 + (10 * Math.cos (t * 0.091)) ؛ fishX = 10 + (5 * Math.sin (t * 0.07)) ؛ sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px،" + mermaidX + "px bottom،" + fishesX + "px" + fishesY + "px، top left"؛ window.requestAnimFrame (animationLoop) ؛ ) AnimationLoop () ؛ )) ؛
أين
window.requestAnimFrame = (function () (إرجاع window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (وظيفة) (رد الاتصال)) (60) ) ؛

وبالمناسبة ، يمكن أيضًا عمل الرسوم المتحركة من خلال CSS3 Transitions / Animations ، ولكن هذا موضوع لمناقشة منفصلة.

المنظر والتفاعلية

أخيرًا ، باستخدام مناورات مماثلة ، يمكنك بسهولة إضافة تأثيرات اختلاف المنظر أو تفاعل تفاعلي مع الخلفية:

تكون صور الخلفية المتعددة مفيدة في مثل هذه السيناريوهات ، لأنه بينما نتحدث فقط عن الخلفية (وليس المحتوى) ، فإن استخدامها يسمح لك بتجنب ازدحام كود html و DOM. لكن كل شيء يأتي بسعر: لا يمكنني الوصول إلى عناصر التكوين الفردية بالاسم أو المعرف أو الفئة أو أي معلمة أخرى. يجب أن أتذكر بوضوح ترتيب العناصر في التكوين في الكود ، ولكل تغيير في أي معلمة لأي عنصر ، في الواقع ، يجب أن ألصق السطر الذي يصف قيم هذه المعلمة لجميع العناصر وتحديثها من أجل التكوين بأكمله.

Sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px،" + mermaidX + "px bottom،" + fishesX + "px" + fishesY + "px، top left"؛

أنا متأكد من أنه يمكن تغليف هذا في كود جافا سكريبت مناسب سيتولى المحاكاة الافتراضية للعلاقات مع الطبقات الفردية ، مع ترك كود html للصفحة نظيفًا قدر الإمكان.

ما هو التوافق؟

تدعم جميع الإصدارات الحديثة من المتصفحات الشائعة ، بما في ذلك IE9 + ، صورًا متعددة (يمكنك التحقق ، على سبيل المثال ، باستخدام caniuse).

يمكنك أيضًا استخدام Modernizr لتزويد المتصفحات التي لا تدعم الخلفيات المتعددة بالبدائل. كما كتب كريس كويير في ملاحظته حول ترتيب الطبقة عند استخدام خلفيات متعددة ، افعل شيئًا كالتالي:

هيئة Multiplebgs (/ * إعلانات BG متعددة رهيبة تتجاوز الواقع وتضخيم الفراخ * /).
إذا كنت مرتبكًا بشأن استخدام JS لتوفير التوافق مع الإصدارات السابقة ، فيمكنك ببساطة إعلان الخلفية مرتين ، ومع ذلك ، فإن لهذا أيضًا عيوبه في شكل التحميل المزدوج المحتمل للموارد (يعتمد هذا على تنفيذ معالجة css في متصفح معين):

/ * متعدد bg احتياطي * / background: # 000 url (...) ... ؛ / * إعلانات BG متعددة رهيبة تتخطى الفراخ الواقعية و imsourcess * / background url (...)، url (...)، url (...)، # 000 url (...)؛

إذا كنت قد بدأت بالفعل في التفكير في Windows 8 ، فضع في اعتبارك أنه يمكنك استخدام خلفيات متعددة عند تطوير تطبيقات نمط المترو ، حيث يتم استخدام نفس المحرك داخليًا كما هو الحال في IE10.

ملاحظة. حول الموضوع: لا يسعني إلا أن أتذكر المقال الهائل عنه

يمكن إضافة العديد من صور الخلفية إلى عنصر واحد مرة واحدة من خلال خاصية الخلفية الفردية. يتيح لك ذلك الحصول على عنصر واحد لإنشاء خلفية معقدة أو صورة واحدة ، وعرضها عدة مرات بإعدادات مختلفة. يتم سرد جميع الصور مع معلماتها مفصولة بفاصلات ، وفي نفس الوقت يتم الإشارة إلى الصورة أولاً ، والتي يتم عرضها أعلى بقية الصور ، والأخيرة ، على التوالي ، هي أدنى صورة. يوضح المثال 1 كيفية إنشاء خلفية بثلاث صور.

مثال 1. ثلاث خلفيات

إذا كنت بحاجة إلى تعيين بعض خصائص النمط للخلفية بشكل منفصل ، مثل حجم الخلفية كما في المثال أعلاه ، فسيتم إدراج معلمات كل خلفية مفصولة بفواصل. تظهر نتيجة هذا المثال في الشكل. 1.

أرز. 1. خلفية بثلاث صور

تسمح لك الصور المنفصلة للخلفية بتغيير موضعها وكذلك تحريكها ، كما هو موضح في المثال 2.

مثال 2. خلفية متحركة

دعنا الآن نفكر في كيفية استخدام صورة واحدة لإنشاء كتلة بإطار (الشكل 2). يتم إصلاح عرض الكتلة ، ويمتد الارتفاع اعتمادًا على حجم محتوى الكتلة.

أرز. 2. إطار مرسومة باليد

يوضح الشكل بوضوح الأجزاء العلوية والسفلية ، والتي يجب قصها في محرر رسومات ووضعها أفقيًا. يتم اختيار الجزء الأوسط بحيث يتكرر عموديًا بدون طبقات. تحتوي الصورة على نمط متكرر واضح ، لذلك يجب ألا تكون هناك صعوبات في الاختيار. نتيجة لذلك ، ستحصل على مثل هذه الصورة المعدة (الشكل 3). يشير المربع المربّع إلى الشفافية ، ويسمح لك بتعيين خلفية ملونة مع الصور وتغييرها بسهولة من خلال الأنماط.

أرز. 3. مُعد لصورة الخلفية

يتم عرض الخلفية نفسها بواسطة خاصية الخلفية ، كما أنها تحدد إحداثيات الجزء المطلوب. يتم سرد معلمات كل خلفية مفصولة بفواصل ، وفي هذه الحالة يكون ترتيبها مهمًا. نريد ألا يتداخل الجزء العلوي والسفلي من الكتلة ، لذلك نضعهما أولاً (مثال 3). تم تحديد لون الخلفية أخيرًا.

مثال 3. صور خلفية متعددة

ترسم الخلفية الأولى الحد العلوي للمربع ، وترسم الخلفية الثانية الجزء السفلي ، وترسم الخلفية الثالثة الحدود الرأسية. الأخير هو اللون الذي يظهر في الجزء المركزي الشفاف من الكتلة (الشكل 4).

). اليوم سنتحدث قليلاً عن ميزة أخرى مثيرة للاهتمام - استخدام صور متعددة في الخلفية.

تكوين الخلفيات

هناك العديد من الأسباب التي قد تدفعك عمومًا إلى تكوين عدة صور في الخلفية ، من أهمها:

• توفير حركة المرور على حجم الصور ، إذا كانت الصور الفردية معًا تزن أقل من الصورة ذات الطبقات المسطحة ، و
• الحاجة إلى سلوك مستقل للطبقات الفردية ، على سبيل المثال ، عند تنفيذ تأثيرات اختلاف المنظر.

قد تكون هناك أسباب أخرى معقولة :)

النهج الكلاسيكي

لذلك ، نحتاج إلى وضع عدة صور للخلفية واحدة فوق الأخرى. كيف يتم حل هذه المهمة عادة؟ الأمر بسيط للغاية: يتم إنشاء كتلة لكل صورة خلفية ، ويتم تخصيص صورة الخلفية المقابلة لها. تكون الكتل إما متداخلة مع بعضها البعض أو توضع في صف بقواعد تحديد الموضع المناسبة. إليك مثال بسيط:

بلوك مع فئة "الصيد" داخل "حورية البحر" لأغراض توضيحية فقط.

الآن بعض الأنماط:
.sample1 .sea، .sample1 .mermaid، .sample1. .sample1 .mermaid (الخلفية: url (media / mermaid.svg) كرر x أسفل اليسار ؛). عينة 1. سمك (الخلفية: url (media / fish.svg) بدون تكرار ؛ الارتفاع: 70 بكسل ؛ العرض: 100 بكسل ؛ اليسار : 30 بكسل ؛ أعلى: 90 بكسل ؛ الموضع: مطلق ؛) .sample1. الصيد (الخلفية: url (media / fishing.svg) عدم التكرار أعلى اليمين 10 بكسل ؛)

نتيجة:

في هذا المثال ، توجد ثلاث خلفيات متداخلة وكتلة واحدة بها أسماك ، وتقع بجوار كتل "الخلفية". من الناحية النظرية ، يمكن نقل الأسماك ، على سبيل المثال ، باستخدام JavaScript أو CSS3 Transitions / Animations.

بالمناسبة ، يستخدم هذا المثال الصيغة الجديدة لتحديد الموضع في الخلفية لـ ".fishing" ، المعرف أيضًا في CSS3:
الخلفية: url (media / fishing.svg) بدون تكرار أعلى اليمين 10 بكسل ؛
إنه مدعوم حاليًا في IE9 + و Opera 11+ ، ولكنه غير مدعوم في Firefox 10 و Chrome 16. لذلك لن يتمكن مستخدمو آخر متصفحين من صيد سمكة حتى الآن.

خلفيات متعددة

تأتي ميزة جديدة تمت إضافتها في CSS3 للإنقاذ - وهي القدرة على تحديد صور خلفية متعددة لعنصر واحد في وقت واحد. تبدو هكذا:

والأنماط المقابلة:
.sample2 .sea (الارتفاع: 300 بكسل ؛ العرض: 480 بكسل ؛ الموضع: نسبي ؛ صورة الخلفية: url ("media / Fishing.svg") ، url ("media / mermaid.svg") ، url ("media / sea. png. ") عدم التكرار ؛ الارتفاع: 70 بكسل ؛ العرض: 100 بكسل ؛ اليسار: 30 بكسل ؛ الجزء العلوي: 90 بكسل ؛ الموضع: مطلق ؛)
لتعريف صور متعددة ، يجب استخدام قاعدة صورة الخلفية ، التي تسرد الصور الفردية مفصولة بفواصل. يمكن استخدام قواعد إضافية ، قائمة أيضًا ، لتعيين تحديد المواقع والتكرار والمعلمات الأخرى لكل صورة. انتبه إلى الترتيب الذي يتم به سرد الصور: يتم سرد الطبقات من اليسار إلى اليمين من الأعلى إلى الأسفل.

النتيجة هي نفسها تمامًا:

قاعدة واحدة

إذا لم تكن السمكة بحاجة إلى التحديد في كتلة منفصلة للمعالجة اللاحقة ، فيمكن إعادة كتابة الصورة بأكملها بقاعدة واحدة بسيطة:

الأنماط:
.sample3 .sea (الارتفاع: 300 بكسل ؛ العرض: 480 بكسل ؛ الموضع: نسبي ؛ صورة الخلفية: url ("media / Fishing.svg") ، url ("media / mermaid.svg") ، url ("media / fish. svg ") ، url (" media / sea.png ") ؛ موضع الخلفية: أعلى اليمين 10 بكسل ، أسفل اليسار ، 30 بكسل 90 بكسل ، أعلى اليسار ؛ تكرار الخلفية: عدم التكرار ، تكرار x ؛)

لن أعطي صورة مع النتيجة - صدقوني ، إنها تتزامن مع الصورتين أعلاه. لكن انتبه إلى الأنماط مرة أخرى ، خاصةً "تكرار الخلفية" - وفقًا للمواصفات ، إذا كان جزء من القائمة في النهاية مفقودًا ، فيجب على المتصفح تكرار القائمة المحددة عدة مرات حسب الضرورة لمطابقة الرقم من الصور في القائمة.

في هذه الحالة ، يكون مكافئًا لهذا الوصف:
تكرار الخلفية: لا تكرار ، تكرار x ، لا تكرار ، كرر س;

حتى أقصر

إذا كنت تتذكر CSS 2.1 ، فإنها تحدد القدرة على وصف صور الخلفية بطريقة موجزة. ماذا عن الصور المتعددة؟ من الممكن أيضًا:

Sample4 .sea (الارتفاع: 300 بكسل ؛ العرض: 480 بكسل ؛ الموضع: نسبي ؛ الخلفية: url ("media / Fishing.svg") أعلى اليمين 10 بكسل بدون تكرار ، url ("media / mermaid.svg") أسفل اليسار تكرار x ، url ("media / fish.svg") 30 بكسل 90 بكسل بدون تكرار، url ("media / sea.png") تكرار x؛)

لكن لاحظ أنه لا يمكنك الآن تخطي القيم فقط (ما لم تتطابق مع القيم الافتراضية). بالمناسبة ، إذا كنت تريد تعيين لون صورة الخلفية ، فيجب أن يتم ذلك في الطبقة الأخيرة.

صور ديناميكية

إذا كان التكوين ثابتًا أو ديناميكيًا ليس أكثر من اعتمادًا على حجم الحاوية ، فمن الواضح أن الخلفيات المتعددة تبسط تصميم الصفحة. ولكن ماذا لو كنت بحاجة إلى العمل مع العناصر الفردية للتكوين بشكل مستقل عن جافا سكريبت (تحريك ، تمرير ، إلخ)؟

بالمناسبة ، إليك مثال من واقع الحياة - موضوع بهندباء في Yandex:


إذا بحثت في الكود ، فسترى شيئًا مثل هذا:

...

تحتوي الكتل التي تحتوي على فئات "b-fluff-bg" و "b-fluff__cloud" و "b-fluff__item" على صور خلفية تتداخل مع بعضها البعض. علاوة على ذلك ، تتحرك الخلفية مع السحب باستمرار ، وتطير الهندباء عبر الشاشة.

هل يمكن إعادة كتابة هذا باستخدام خلفيات متعددة؟ من حيث المبدأ ، نعم ، ولكن بشرط 1) دعم هذه الميزة في المتصفحات المستهدفة و ... 2) واصل القراءة ؛)

كيف أقوم بإضافة مكبرات الصوت إلى خلفيات متعددة؟ في مثل هذه الحالة ، من الملائم أن يقوم المتصفح في العرض الداخلي بتشتيت المعلمات الفردية لصورة الخلفية وفقًا للقواعد المناسبة. على سبيل المثال ، لتحديد الموضع ، يوجد "موضع الخلفية" ، وبالنسبة للتعويضات ، ما عليك سوى تغييره. ومع ذلك ، هناك رسوم مقابل استخدام صور متعددة - يجب أن تسرد هذه القاعدة (وأي قاعدة مماثلة) موضع جميع الخلفيات المعينة لحجبتك ، ولا يمكنك القيام بذلك بشكل انتقائي.

لإضافة الرسوم المتحركة إلى خلفيتنا مع الأسماك ، يمكنك استخدام الكود التالي:
$ (مستند). t = 0 ؛ وظيفة الرسوم المتحركةLoop () (fishesY = 90 + Math.floor (30 * Math.sin (t ++ / 180.0)) ؛ if (- fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) ميرميد إكس = 0 ؛ fishY = -10 + (10 * Math.cos (t * 0.091)) ؛ fishX = 10 + (5 * Math.sin (t * 0.07)) ؛ sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px،" + mermaidX + "px bottom،" + fishesX + "px" + fishesY + "px، top left"؛ window.requestAnimFrame (animationLoop) ؛ ) AnimationLoop () ؛ )) ؛
أين
window.requestAnimFrame = (function () (إرجاع window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (وظيفة) (رد الاتصال)) (60) ) ؛

وبالمناسبة ، يمكن أيضًا عمل الرسوم المتحركة من خلال CSS3 Transitions / Animations ، ولكن هذا موضوع لمناقشة منفصلة.

المنظر والتفاعلية

أخيرًا ، باستخدام مناورات مماثلة ، يمكنك بسهولة إضافة تأثيرات اختلاف المنظر أو تفاعل تفاعلي مع الخلفية:

تكون صور الخلفية المتعددة مفيدة في مثل هذه السيناريوهات ، لأنه بينما نتحدث فقط عن الخلفية (وليس المحتوى) ، فإن استخدامها يسمح لك بتجنب ازدحام كود html و DOM. لكن كل شيء يأتي بسعر: لا يمكنني الوصول إلى عناصر التكوين الفردية بالاسم أو المعرف أو الفئة أو أي معلمة أخرى. يجب أن أتذكر بوضوح ترتيب العناصر في التكوين في الكود ، ولكل تغيير في أي معلمة لأي عنصر ، في الواقع ، يجب أن ألصق السطر الذي يصف قيم هذه المعلمة لجميع العناصر وتحديثها من أجل التكوين بأكمله.

Sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px،" + mermaidX + "px bottom،" + fishesX + "px" + fishesY + "px، top left"؛

أنا متأكد من أنه يمكن تغليف هذا في كود جافا سكريبت مناسب سيتولى المحاكاة الافتراضية للعلاقات مع الطبقات الفردية ، مع ترك كود html للصفحة نظيفًا قدر الإمكان.

ما هو التوافق؟

تدعم جميع الإصدارات الحديثة من المتصفحات الشائعة ، بما في ذلك IE9 + ، صورًا متعددة (يمكنك التحقق ، على سبيل المثال ، باستخدام caniuse).

يمكنك أيضًا استخدام Modernizr لتزويد المتصفحات التي لا تدعم الخلفيات المتعددة بالبدائل. كما كتب كريس كويير في ملاحظته حول ترتيب الطبقة عند استخدام خلفيات متعددة ، افعل شيئًا كالتالي:

هيئة Multiplebgs (/ * إعلانات BG متعددة رهيبة تتجاوز الواقع وتضخيم الفراخ * /).
إذا كنت مرتبكًا بشأن استخدام JS لتوفير التوافق مع الإصدارات السابقة ، فيمكنك ببساطة إعلان الخلفية مرتين ، ومع ذلك ، فإن لهذا أيضًا عيوبه في شكل التحميل المزدوج المحتمل للموارد (يعتمد هذا على تنفيذ معالجة css في متصفح معين):

/ * متعدد bg احتياطي * / background: # 000 url (...) ... ؛ / * إعلانات BG متعددة رهيبة تتخطى الفراخ الواقعية و imsourcess * / background url (...)، url (...)، url (...)، # 000 url (...)؛

إذا كنت قد بدأت بالفعل في التفكير في Windows 8 ، فضع في اعتبارك أنه يمكنك استخدام خلفيات متعددة عند تطوير تطبيقات نمط المترو ، حيث يتم استخدام نفس المحرك داخليًا كما هو الحال في IE10.

ملاحظة. حول هذا الموضوع: لا يسعني إلا أن أتذكر المقال الهائل عنه.