عندما ندرس أنماط مواقع الويب الأخرى، غالبًا ما نجد موقفًا يتم فيه استخدام نفس الصورة في العديد من سمات الخلفية لتلبية استخدام أجزاء مختلفة من صفحة الويب. إذا فتحت هذا النوع من الصور وألقيت نظرة ستجد أن هذه الصورة تحتوي على العديد من الصور الصغيرة مثل:
مثال آخر:
هذه الصور الصغيرة هي الأجزاء بعد تقسيم الصورة بأكملها، ويتم وضع كل جزء على صورة واحدة بدلاً من تخزينها كصور منفصلة. نعلم جميعًا أن الغرض هو تقليل عدد طلبات http وتوفير الوقت وعرض النطاق الترددي .
فكيف ندرك أن جزءًا فقط من الصورة يتم عرضه في أماكن مختلفة؟ وهذا يستخدم مشكلة تحديد موضع صورة الخلفية التي سنتحدث عنها اليوم. أعتقد أن العديد من الأشخاص يشعرون بالاكتئاب بشأن هذه المشكلة، وغالبًا ما يسألني الأصدقاء، لذلك سأشرحها اليوم بشكل منهجي:
نحن نعلم أنه عند استخدام صورة كخلفية، يجب كتابة ملف css على هذا النحو على سبيل المثال، يمكن أن يكون أيضًا جسمًا، وخلفية td وp وما إلى ذلك هي نفسها.
Code: div{ الخلفية: #FFF url(image) no-repeat Fixed xy;} |
قيم سمات الخلفية هنا هي:
#FFF لون الخلفية: (قيمة اللون، المكان الذي لا تتم تغطية صورة الخلفية فيه، أو عندما يكون هناك لا يوجد لون خلفية صورة الخلفية)
صورة خلفية الصورة : (هنا عنوان الصورة)
ما إذا كان سيتم تكرار عدم التكرار: (عندما تكون الصورة أصغر من حجم الحاوية، سيتم ترتيب الصورة بشكل متكرر لملء الحاوية بشكل افتراضي. عدم التكرار يعني عدم التكرار. فقط في هذا الوقت سيتم تحديد إحداثيات تحديد المواقع اللاحقة مفيد.)
ما إذا كانت الخلفية الثابتة يتم تمريرها مع الحاوية: (هناك قيمتان اختياريتان، تمرير التمرير، ثابت لا يتم تمريره، الافتراضي هو التمرير)
تحديد موضع صورة الخلفية xy: (لاحظ أن تحديد الموضع يكون ذا معنى فقط في حالة عدم التكرار. وهذا هو محور التركيز اليوم)
نحتاج إلى توضيح بعض النقاط في موضع صورة الخلفية:
1. أول واحدة من القيمتين هو تحديد المواقع أفقيا، ونحن نسميها تحديد المواقع على المحور السيني. القيمة الأخيرة هي الموضع الطولي، والذي نسميه موضع المحور y. إذا كانت هناك قيمة واحدة فقط، فإن الاتجاه الافتراضي هو اتجاه المحور السيني. في هذا الوقت، يكون اتجاه المحور الصادي الافتراضي هو المحاذاة لأعلى ولأسفل، وهو المركز.
2. أصل محور الإحداثيات هو الرأس الأيسر للحاوية المقابلة.
3. يشير سهم المحور y لهذا الإحداثي إلى الأسفل، أي أن قيم xy في الزاوية اليمنى السفلية (داخل الحاوية) كلها موجبة.
4. تمثل قيم xy على التوالي قيمة الرأس الأيسر لصورة الخلفية بالنسبة إلى أصل الإحداثيات (أي الرأس الأيسر للحاوية).
5. يمكن التعبير عن قيمة xy كنسبة مئوية أو بكسل.
6.xy يمكن أيضًا التعبير عنها بطرق المحاذاة الخمس "يسار، يمين، أعلى، أسفل، مركز"، لكن لاحظ: عند التعبير عن "يسار، يمين، أعلى، أسفل، مركز"، يتم تطبيق قواعد المحاذاة، بدلاً من ذلك من قواعد التنسيق . عندما يكون x على اليسار، فهذا يعني أن الجانب الأيسر من الصورة محاذى مع الجانب الأيسر من الحاوية. وعندما يكون على اليمين، فهذا يعني أن الجانب الأيمن من الصورة محاذى مع الجانب الأيمن من الحاوية ، فهذا يعني أن الجزء العلوي من الصورة محاذٍ للجزء العلوي من الحاوية. وعندما يكون في الأسفل، فهذا يعني أن الجزء العلوي من الصورة محاذٍ للجزء السفلي من الحاوية. يعني محاذاة مركزية.
7. عندما يتم التعبير عن xy كنسبة مئوية أو بكسل، يمكن أن تكون قيمته رقمًا سالبًا. يمكننا أن نفهم بسهولة معنى الأرقام السالبة من خلال تطبيق قواعد الإحداثيات عندما يكون x رقمًا سالبًا، فهذا يعني أن الرأس الأيسر للصورة يقع على يسار الرأس الأيسر للحاوية. فهذا يعني أن الرأس الأيسر للصورة يقع فوق النقطة الثابتة اليسرى للحاوية. أي إلى اليسار وإلى الأعلى خارج نطاق الحاوية.
أدناه أستخدم بعض الرسوم التوضيحية لتوضيح عدة مواقف . يمثل المربع الأزرق الصورة، ويمثل المربع المنقط الحاوية (يمكن أن تكون div أو td أو نصًا مباشرًا). أستخدم اللون الأبيض للإشارة إلى الجزء المرئي، وما هو خارج نطاق الحاوية غير مرئي. إحداثيات النقطة الثابتة اليسرى للحاوية هي (0، 0).
الصورة الأولى، تتم محاذاة صورة الخلفية مع الجزء العلوي الأيسر من المحتوى، ويمكن أيضًا كتابة 0px 0px في الجزء العلوي الأيسر
في الصورة الثانية، صورة الخلفية في منتصف الحاوية، وإحداثيات النقطة الثابتة هي قيم موجبة.
في الصورة الثالثة صورة الخلفية في الجانب الأيسر العلوي من الحاوية وإحداثيات النقطة الثابتة سالبة
------------------------- --------- ----------------------------------------
في هذه المرحلة قد نفهم كيفية استخدام قيمة تحديد الموضع في الخلفية لتحديد موضع صورة الخلفية بدقة. دعنا نعود ونلقي نظرة على الصورتين المقدمتين في البداية، يمكننا استخدام: تحديد موضع الخلفية والمرئي فقط داخل الحاوية خصائص لاستدعاء جزء معين من الصورة بأكملها في الإرادة.
ولكن لتسهيل الاتصال، علينا الانتباه إلى بعض القواعد عند ترتيب هذه الصور الصغيرة، على سبيل المثال: عادة ما تكون المسافة بين الصور الصغيرة بحجم الحاوية التي يتم استدعاء الصور الصغيرة فيها، أو تكون المسافة أكبر. وذلك لتجنب عرضها في الحاوية. أظهر لنا الصور التي لا نريد عرضها!
بالإضافة إلى ذلك، إذا كان تحديد المواقع يستخدم النسب المئوية، فإن الخوارزمية تكون خاصة إلى حد ما. اسمحوا لي أن أقدم لكم مثالاً:
الكود: الخلفية:#FFF url(image) no-repeat ثابت 50% -30%؛ |
في هذا الوقت، أين يجب أن تكون الصورة في الحاوية؟ صيغة الخوارزمية هي كما يلي:
موضع الإحداثيات من الرأس الأيسر للصورة من الرأس الأيسر للحاوية
x: (عرض الحاوية - عرض الصورة) x50%
y: (ارتفاع الحاوية - ارتفاع الصورة) x (-30%)
تطبق النتيجة التي تم الحصول عليها قاعدة الإحداثيات إذا كان الفرق سالبًا وكانت النسبة موجبة، فإن نتيجة العملية تكون سالبة. وإذا كان الفرق سالبا والنسبة سالبة فإن النتيجة إيجابية. بشكل عام، العملية هنا تتوافق مع الخوارزمية. من خلال جلب نتيجة العملية إلى قاعدة الإحداثيات، يمكنك الحصول على موضع الصورة.
على سبيل المثال: عرض الحاوية: 600 بكسل الارتفاع: 600 بكسل;
باستخدام النمط أعلاه، يمكننا الحصول على موضع الصورة على النحو التالي:
س: (600بكسل-200بكسل)*50%
ص: (600بكسل-200بكسل)*(-30%)
كما هو موضح أدناه:
