استخدام CSS لتعيين صورة خلفية

• قد 4, 2024

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

لبنة البناء الأساسية لصورتك الخلفية هي ، بشكل ملائم ، خاصية "صورة الخلفية". يمكنك استخدام هذه الخاصية لإخبار موقعك بمكان وجود ملف الصورة ، كما يلي:

الجسم {
صورة الخلفية: url ("image.gif") ؛
}

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

الجسم {
صورة الخلفية: url ("image.gif") ؛
خلفية الموقف: مركز أعلى.
}

عند تحديد خاصية "موضع الخلفية" ، تقوم القيمة الأولى بتعيين المحاذاة الأفقية (يسار أو وسط أو يمين) وتعيين الثانية المحاذاة الرأسية للصورة (أعلى أو وسط أو أسفل).

بعد ذلك ، تقرر أنك تريد إيقاف الصورة من التجانب (تكرار نفسها) أفقيًا ، على الرغم من أنك تريد تجانبها رأسياً. حان الوقت لإظهار خاصية "تكرار الخلفية":

الجسم {
صورة الخلفية: url ("image.gif") ؛
خلفية الموقف: مركز أعلى.
تكرار الخلفية: تكرار ص.
}

يؤدي تعيين القيمة إلى 'تكرار-ي' إلى إخبار المستعرض بتجميع صورة الخلفية على طول المحور ص ، ويعرف أيضًا باسم عموديًا ، ولكن ليس المحور السيني (أفقيًا) ، وهو ما أردناه بالضبط. إذا أردت تجانبها أفقياً ولكن ليس رأسياً ، فستستخدم قيمة "تكرار x" بدلاً من ذلك ؛ إذا لم تكن ترغب في تجانب الصورة على الإطلاق ، فامنحها قيمة "عدم التكرار". القيمة الافتراضية هي تجانب الصورة أفقياً وعمودياً ، لذلك إذا كان هذا هو الخيار الأفضل لصورتك ، فلن تحتاج إلى تعيين خاصية "تكرار الخلفية" على الإطلاق.

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

الجسم {
صورة الخلفية: url ("image.gif") ؛
خلفية الموقف: مركز أعلى.
تكرار الخلفية: تكرار ص.
الخلفية مرفق: ثابت.
}


إذا كنت تريد الاحتفاظ بقواعد CSS الخاصة بك أصغر حجم ممكن ، يمكنك دمج كل قيم الخلفية الخاصة بك في سطر واحد باستخدام خاصية "الخلفية" ، مثل هذا:

خلفية {
url ("image.gif") أعلى مركز ثابت للتكرار y ؛
}

عند استخدام خاصية "الخلفية" ، يجب عليك إدراج القيم بترتيب معين:
[لون الخلفية (إذا تم استخدامه)] [صورة الخلفية] [تكرار الخلفية] [خلفية المرفق] [موضع الخلفية]. يمكنك استبعاد أي قيمة لا تحتاجها ، تحتاج فقط إلى سرد أي قيم تستخدمها بالترتيب الصحيح أو لن تعمل القاعدة.

تعليمات الفيديو: الدرس 11 دورة CSS شرح وضع الخلفية عبارة عن صورة (قد 2024).