غطاء حجم الخلفية هو خاصية كس التي تسمح لك لتوسيع نطاق صورة الخلفية بحيث يغطي تماما كتلة معينة أو عنصر. يعد هذا مناسبا جدا عندما تحتاج إلى إنشاء تأثير صورة بملء الشاشة أو عندما تحتاج إلى تغيير حجم صورة الخلفية بحيث تتطابق تماما مع الأبعاد المحددة.
عند تعيين خاصية غطاء حجم الخلفية ، سيتم تحجيم الصورة بشكل متناسب لملء الحاوية بالكامل ، مع الحفاظ على نسبها. إذا كانت الصورة لها نسب مختلفة عن الحاوية ، فقد يتم اقتصاص جزء من الصورة.
تطبيق خاصية غطاء حجم الخلفية بسيط للغاية. تحتاج إلى تحديد العنصر الذي تريد تعيين صورة الخلفية له وإضافة قاعدة كس تحدد خاصية غطاء حجم الخلفية. يمكنك استخدام هذه الخاصية لأي كتلة أو عنصر على صفحة الويب الخاصة بك.
على سبيل المثال ، إذا كان لديك كتلة ديف مع فئة "رأس" وتحتاج إلى تعيين صورة كصورة الخلفية "رأس.جبغ " ، يمكنك استخدام التعليمات البرمجية التالية:
.رأس {
الخلفية-صورة: رابط ("رأس.جبغ");
حجم الخلفية: غطاء;
}
- غطاء حجم الخلفية: المفهوم الأساسي والجوهر
- كيف أقوم بإعداد غطاء حجم الخلفية على موقع ويب?
- مزايا استخدام غطاء حجم الخلفية
- سؤال وجواب
- ما هو غطاء حجم الخلفية?
- هل من الممكن استخدام غطاء حجم الخلفية مع قيم أخرى لخاصية حجم الخلفية?
- كيف ستبدو صورة الخلفية باستخدام غطاء حجم الخلفية اعتمادا على حجم المنطقة?
غطاء حجم الخلفية: المفهوم الأساسي والجوهر
غطاء حجم الخلفية هو أحد قيم خاصية حجم الخلفية المغلق. يحدد حجم صورة الخلفية بحيث تغطي خلفية العنصر بالكامل ، مع الحفاظ على نسبها.
عندما يتم تعيين خاصية حجم الخلفية على الغلاف ، يقوم المتصفح بقياس صورة الخلفية بحيث يساوي عرضها أو ارتفاعها عرض أو ارتفاع خلفية العنصر. في هذه الحالة ، يتم اقتصاص الصورة تلقائيا بحيث تملأ خلفية العنصر بالكامل.
وبالتالي ، غطاء حجم الخلفية يسمح لك لخلق تأثير ملء تماما خلفية عنصر مع صورة. يكون هذا مفيدا بشكل خاص عندما تحتاج إلى تعيين صورة خلفية يجب أن تشغل المساحة المتاحة بالكامل من الخلفية دون تشويه واقتصاص.
وتريد تعيين صورة خلفية تملأ هذا العنصر بالكامل ، ولكن في نفس الوقت تحافظ على نسبها ، يمكنك استخدام رمز كس التالي:
. بغ {
خلفية صورة: رابط ('الخاص بك-صورة.جي بي جي);
الخلفية-كرر: لا-كرر;
حجم الخلفية: غطاء;
دون تشويه وزراعة المحاصيل ، مع الحفاظ على نسبها.
غطاء حجم الخلفية هو خاصية كس مفيدة تساعدك على إنشاء عناصر مذهلة وقابلة للتكيف باستخدام صور الخلفية.
كيف أقوم بإعداد غطاء حجم الخلفية على موقع ويب?
- غطاء حجم الخلفية هو قيمة الخاصية كس حجم الخلفية ، والذي يسمح لك لتوسيع نطاق صورة الخلفية بحيث يغطي تماما عنصر معين ، مع الحفاظ على نسبها. أي أنه سيتم تحجيم الصورة بحيث يكون عرضها أو ارتفاعها مساويا لعرض العنصر أو ارتفاعه ، ولكن بدون تشويه.
- هناك عدة طرق لتعيين خاصية غلاف حجم الخلفية على الموقع:
- نمط كس الخارجي: تضمين رمز كس داخل علامة النمط أو حفظه في ملف كس منفصل وتوصيله إلى الصفحة.
النمط المضمن: أضف سمة النمط إلى العلامة عن طريق تعيين قيمة خاصية حجم الخلفية لتغطيتها.
| المغلق جزءا لا يتجزأ: إضافة نمط داخل العلامة باستخدام سمة النمط ، تعيين قيمة الخاصية حجم الخلفية لتغطية. | مثال على استخدام غطاء حجم الخلفية بنمط كس خارجي: |
|---|---|
|
|
الخلفية-صورة: رابط (مسار / إلى / صورة.جي بي جي);
| حجم الخلفية: غطاء; | } |
|---|---|
|
أتش تي أم أل
المغلق
في كلتا الحالتين ، يجب تحديد المسار إلى الصورة في خاصية صورة الخلفية ، لتحل محل " المسار / إلى / الصورة.جبغ " إلى المسار الفعلي أو ورل إلى الصورة.
هذه مجرد أمثلة على استخدام خاصية غلاف حجم الخلفية لصور الخلفية. يمكنك تطبيقه على عناصر مختلفة على صفحة الويب الخاصة بك وضبط إعدادات التكبير باستخدام قيم أخرى لخاصية حجم الخلفية ، مثل "احتواء" و "تلقائي".
مزايا استخدام غطاء حجم الخلفية
1. تحجيم الصورة التلقائي
تسمح لك خاصية غطاء حجم الخلفية بقياس صورة الخلفية تلقائيا بحيث تملأ العنصر المحدد تماما. هذا مفيد بشكل خاص عندما تحتاج إلى جعل صورة الخلفية تتكيف مع أحجام الشاشة المختلفة. وبالتالي ، بغض النظر عن حجم العنصر ونسبه ، ستشغله الصورة دائما تماما.
2. حفظ نسب الصورة
عند استخدام غطاء حجم الخلفية ، تحتفظ الصورة بنسبها ، مما يسمح لك بتجنب التشويه والحفاظ على الجودة. إذا كانت نسب العنصر والصورة مختلفة ، فيمكن اقتصاص جزء من الصورة بحيث يملأ العنصر بالكامل.
3. سهل الاستخدام
مطلوب أي معرفة خاصة من المغلق أو جافا سكريبت لاستخدام الخاصية غطاء حجم الخلفية. يكفي ببساطة تطبيق هذه الخاصية على عنصر به صورة خلفية. هذا يبسط إلى حد كبير مهمة إنشاء تصميم متكيف وجذاب من الناحية الجمالية.
4. تحسين الأداء
نظرا لأن خاصية غطاء حجم الخلفية تقيس الصورة ، فقد يؤدي ذلك إلى تقليل الحمل على الخادم ، حيث سيتم تحميل الصورة مرة واحدة فقط وتحجيمها من جانب العميل. يتيح لك ذلك تحسين الأداء وتسريع تحميل الصفحة.
5. إمكانية استخدام صور عالية الجودة
نظرا للتحجيم والاقتصاص ، تتيح لك خاصية غطاء حجم الخلفية استخدام صور عالية الجودة ، حيث سيتم عرضها بأفضل جودة بغض النظر عن حجم الشاشة أو العنصر. هذا مهم بشكل خاص عند العمل مع صور عالية الدقة ومفصلة.
6. خلق تأثيرات المنظر
يمكن أيضا استخدام غطاء حجم الخلفية لإنشاء تأثيرات اختلاف المنظر عندما يتحرك عنصر به صورة خلفية بسرعات مختلفة بالنسبة لعناصر الصفحة الأخرى. هذا يضيف التفاعل والعمق إلى العرض المرئي ويخلق تجربة مستخدم أكثر جاذبية وديناميكية.
ونتيجة لذلك ، فإن استخدام خاصية غطاء حجم الخلفية يجعل من السهل إنشاء تصميمات تكيفية وجذابة من الناحية الجمالية ، ويحسن جودة وسرعة تحميل صور الخلفية ، ويضيف التفاعل والديناميكيات إلى تجربة المستخدم.
سؤال وجواب
ما هو غطاء حجم الخلفية?
غطاء حجم الخلفية هو خاصية كس التي تسمح لك لتعيين صورة الخلفية في منطقة معينة بحيث يغطي تماما هذه المنطقة دون تشويه.