خلفية متعددة في css3. خلفيات متعددة مع CSS ، أو خلفيات متعددة

.

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

أرز. 1. حظر للموقع

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

أرز. 2. الصور المعدة

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

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

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

HTML5 CSS2.1 CSS3 IE 8 IE 9 Cr Op Sa Fx

ترسم الخلفية الأولى الحد العلوي للمربع ، وترسم الخلفية الثانية الجزء السفلي ، وترسم الخلفية الثالثة الحدود الرأسية.

التحقق في المتصفحات. لم يعرض Internet Explorer 8 أي صور على الإطلاق ، فقد عرضت المتصفحات الأخرى (IE 9 و Opera 10.60 و Firefox 3.6 و Chrome 5 و Safari 5) الإطار بشكل صحيح (الشكل 3).

أرز. 3. عرض الإطار في متصفح Safari

استخدام خلفيات متعددة يجعل الموقف أسهل بكثير للمطورين ، خاصة عند كتل التخطيط. لم يتبق سوى شيء واحد صغير. يجب أن يتوقف متصفح IE 6-8 عن الوجود.

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

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

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

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

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

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

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

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

الآن بعض الأنماط:
.sample1 .sea، .sample1 .mermaid، .sample1. .sample1 .mermaid (الخلفية: url (media / mermaid.svg) كرر x أسفل اليسار ؛). عينة 1. سمك (الخلفية: url (media / fish.svg) بدون تكرار ؛ الارتفاع: 70 بكسل ؛ العرض: 100 بكسل ؛ اليسار : 30 بكسل ؛ أعلى: 90 بكسل ؛ الموضع: مطلق ؛). عينة 1. الصيد (الخلفية: عنوان 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) mermaidX = 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 () (return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (function) (callback)) (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.

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

مهمة

أضف صورتين للخلفية للكتلة باستخدام CSS3.

حل

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

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

أرز. 1. صورة خلفية للحدود على اليسار

أرز. 2. صورة خلفية للحدود على اليمين

كعنصر كتلة يتم إضافة خلفية إليه ، يتم استخدام العلامة عادةً