تتيح لك خاصية صورة الخلفية تحديد صورة سيتم عرضها في الخلفية. يمكن استخدامه بالاقتران مع لون الخلفية ، لذلك إذا لم تتكرر الصورة ، فسيتم ملء لون الخلفية بلون الخلفية إذا كان لا يمكن تغطية الصورة. الكود بسيط ، فقط تذكر أن المسار يتعلق بملاءة الأنماط ، لذلك في الكود التالي ، فإن الصورة وملاءة الأنماط في نفس الدليل
للصور ، نفكر أولاً في صورة الخلفية. لأن العديد من زخارفنا تتحقق مع صور الخلفية. نظرًا لأن هذا هو الحال ، فلنبدأ في صورة خلفية التحكم في CSS.
التعريف والاستخدامتضع خاصية صورة الخلفية صورة الخلفية للعنصر.
تأخذ خلفية عنصر ما جميع أبعاد العنصر ، بما في ذلك الهوامش والحدود الداخلية ، ولكن ليس الهوامش الخارجية.
بشكل افتراضي ، توجد صورة الخلفية في الركن الأيسر العلوي من العنصر وتتكرر أفقياً ورأسياً.
1. صورة خلفية التحكم في CSS:بالنسبة لصفحة ويب ، عندما بدأنا في التصميم ، قد لا نفكر كثيرًا في صورة الخلفية ، لأن معظمهم يحتاجون فقط إلى تصميم ألوان الخلفية. أعتقد أن الأمر بسيط للغاية ، لأنه نفس الموسيقى الأمامية ، وستكون سرعة فتح صفحة الويب تأثيرًا معينًا. ومع ذلك ، بالنسبة لمواقع الويب الشخصية العامة أو المدونات الشخصية ، فإنه بالطبع لا غنى عنه لإظهار شخصيتها. بالطبع ، لن يكون لا شيء مثاليًا للغاية. هناك أشياء جيدة وأشياء سيئة. أي عندما لا تكون الصورة متوفرة ولكن CSS متوفرة ، فلن يتم عرض محتوى الاستبدال. لذلك ، لا ينصح باستخدام صور خلفية CSS في نص زر التنقل أو المواقف المماثلة.
هناك العديد من سمات CSS التي تتحكم في صور الخلفية ، وسيتم استخدام معظمها طالما أنها مرتبطة بالصورة.
(1) استيراد صور الخلفية:بالطبع ، ما هو أكثر دراية به هو الخلفية وصورة الخلفية.
رمز تصميم صور الخلفية لصفحات الويب هو:
body {background: url (d: /images/04.jpg)}
أو
الجسم {background-image: url (d:/images/04.jpg)}
وبهذه الطريقة ، يمكننا استيراد الصور التي نريد استخدامها كخلفية في صفحة الويب.
(2) كيفية عرض صور الخلفية:بالطبع ، لن يتمكن استخدام الكود أعلاه وحده من التعبير عن التأثير الذي تريده. لأنه إذا كانت الصورة صغيرة ، فستكون مبلطة بطريقة مسطحة. إذا كان كبيرًا ، من أجل عرضه ، سيظهر شريط التمرير ، وهو أمر غير جيد. لذلك ، علينا أن نستخدم تكرار الخلفية للتحكم في العرض.
إنها القيمة:
كرر: القيمة الافتراضية. صورة خلفية مبلطة في صورة واتجاه أفقي
عدم التكرار: صورة الخلفية ليست مبلطة
التكرار-X: صورة الخلفية مبلطة أفقيًا فقط
كرر Y: صورة الخلفية مبلطة في الاتجاه العمودي فقط
بالنسبة للرمز ، أعتقد أن أي شخص يعرف القليل من CSS يعرف ذلك ، على النحو التالي
:
body {background: url (d: /images/04.jpg) ؛ خلفية تكرار: عدم التكرار}
وبهذه الطريقة ، يتم عرضه بحجم الصورة الأصلي.
(3) التحكم في حجم صورة الخلفية:لكن السؤال هو ، ماذا لو كانت الصورة كبيرة جدًا؟ للحصول على صفحة ويب جيدة ، من الأفضل عدم استخدام صور كبيرة جدًا. تم ذكر السبب أيضًا أعلاه ، والذي يؤثر على سرعة فتح صفحة الويب. من الأفضل أن نستخدم PS أو الألعاب النارية للتعامل معها. لكن بما أنني ذكرت ذلك ، فإننا لسنا خائفين من استخدام CSS للتحكم في حجم الصورة.
أعتقد أن الكثير من الناس سيستخدمون الرمز التالي بشكل طبيعي:
انسخ الرمز