تتيح لك إمكانيات لغة الترميز - HTML - وأوراق الأنماط المتتالية - CSS - وضع صورة داخل أخرى بعدة طرق. بالطبع ، هذا يتطلب بعض المهارات في تخطيط صفحة الويب ، وتحتاج إلى اختيار طريقة معينة بناءً على الكود الموجود. ومع ذلك ، في بعض الحالات ، يمكنك الاستغناء عن تعديل الكود المصدري.
تعليمات
الخطوة 1
هناك طريقة لوضع صورة في أخرى دون أي تغييرات في صفحات الموقع. للقيام بذلك ، يكفي تحرير صورة الخلفية المخزنة على الخادم - استخدم أي محرر رسومات لوضع الصورة الأمامية عليها. إذا كانت هذه الطريقة مناسبة لك ، فابدأ بتحديد موقع التخزين واسم ملف صورة الخلفية. يمكن القيام بذلك عن طريق العثور عليه في الكود المصدري للصفحة أو عن طريق فتحه في علامة تبويب منفصلة والنظر إلى المسار الكامل في شريط عنوان المتصفح.
الخطوة 2
باستخدام مدير الملفات في نظام إدارة المحتوى أو عميل FTP ، قم بتنزيل الملف المطلوب على جهاز الكمبيوتر وافتحه في أي محرر رسومات - على سبيل المثال ، في تطبيق الرسام المثبت مع Windows.
الخطوه 3
ضع الصورة الأمامية فوق الخلفية - في برنامج الرسام ، تحتاج إلى تحديد عنصر "إدراج من" من القائمة المنسدلة "إدراج" في علامة التبويب "الصفحة الرئيسية" والعثور على الملف المطلوب في مربع الحوار الذي يفتح. ثم اضبط موضع الصورة المدرجة على الخلفية الموجودة (اسحبها بالماوس) واحفظ النتيجة (Ctrl + S).
الخطوة 4
أعد تحميل الصورة المحررة ، واستبدل الصورة القديمة. هذا يكمل الإجراء.
الخطوة الخامسة
الطريقة الموضحة غير ملائمة في حالة الحاجة إلى تغيير الصور المدرجة من وقت لآخر. ثم استخدم إمكانيات لغة HTML - على سبيل المثال ، اجعل صورة الخلفية هي خلفية عنصر الصفحة الذي سيتم وضع الصورة الأمامية فيه. يمكن أن يكون عنصر الحاوية هذا ، على سبيل المثال ، طبقة (div). لجعل خلفية كبيرة من الصور ، تحتاج إلى استخدام وصف النمط - سمة النمط لعلامة div. قد تبدو الحاوية الفارغة في كود HTML كما يلي:
بين قوسين ، حدد عنوان واسم ملف صورة الخلفية على موقعك.
الخطوة 6
قم بإنشاء علامة صورة أمامية (img) ، باستخدام نفس سمة النمط لتعيين مقدار المساحة المتروكة من حواف حاوية الخلفية. على سبيل المثال:
هنا ، تحدد سمات العرض والارتفاع أبعاد الصورة ، وتشير الأرقام الأربعة بعد الحشو إلى المساحة المتروكة بالبكسل من حواف الحاوية ، بدءًا من الجزء العلوي (50) ثم في اتجاه عقارب الساعة (60 - يمين ، 70 - أسفل ، 80 - اليسار).
الخطوة 7
ضع علامة img في حاوية:
الخطوة 8
أضف الأسطر التي تم إنشاؤها إلى التعليمات البرمجية المصدر للصفحة ، ثم قم بتغيير المسافات البادئة ، واضبط موضع الصورة المدرجة على خلفية صورة الخلفية.
