صور خلفية الجسم تتم بسهولة

أتش تي أم أل

من الميزات الرائعة التي ستجدها في العديد من المواقع حيث تظهر منطقة المحتوى المركزية لتغطي الصفحة بظل خلفي خلفها. إنها في الواقع طريقة بسيطة إلى حد ما لجعل مدونتك تبدو جميلة (أو موقع ويب آخر) باستخدام صورة خلفية واحدة.

كيف يتم ذلك؟

  1. اكتشف مدى اتساع المحتوى الخاص بك. مثال: 750 بكسل.
  2. أنشئ صورة في تطبيق الرسم التوضيحي الخاص بك (أنا أستخدم Illustrator) أعرض من منطقة المحتوى. مثال: 800 بكسل.
  3. اضبط خلفية الصورة على الخلفية التي ترغب في الحصول عليها على كل جانب من جوانب المدونة.
  4. أضف منطقة بيضاء فوق الخلفية.
  5. ضع ظلًا على المنطقة البيضاء التي تنبثق من جانبي المنطقة.
  6. اضبط مساحة الاقتصاص على العرض بمقدار 1 بكسل في الارتفاع. سيؤدي ذلك إلى جعل الصورة للتنزيل لطيفة ومضغوطة للعرض السريع.
  7. إخراج الصورة.

إليك كيفية إنشائي باستخدام Illustrator (لاحظ أن مساحة المحاصيل لدي أطول بكثير ... وهذا فقط حتى تتمكن من رؤية ما أفعله):
الخلفية مع المصور

فيما يلي مثال على الشكل الذي سيبدو عليه الإخراج مع صورة الخلفية:
مثال على صورة الخلفية

إليك كيفية تطبيق الصورة باستخدام علامة نمط الجسم في ملفك CSS ملف.

الخلفية: # B2B2B2 url ('images / bg.gif') مركز تكرار ؛

فيما يلي تشريح لعلامة نمط الخلفية:

  • # B2B2B2 - يحدد لون الخلفية العام للصفحة. في هذا المثال ، يكون اللون الرمادي مطابقًا للرمادي في صورة الخلفية.
  • url ('images / bg.gif') - يحدد صورة الخلفية التي ترغب في استخدامها.
  • تكرار y - يضبط الصورة لتكرارها على المحور y. لذلك ستتكرر صورة الخلفية من أعلى الصفحة إلى أسفلها.
  • في المنتصف - لضبط الصورة في وسط الصفحة.

جميل وسهل ... صورة واحدة ، علامة نمط واحدة!

2 تعليقات

  1. 1
  2. 2

ما رأيك؟

يستخدم هذا الموقع نظام Akismet لتقليل الرسائل الضارة. تعرف كيف تتم معالجة بيانات تعليقك.