قابلیت های زبان نشانه گذاری - HTML - و ورق های سبک آبشار - CSS - به شما امکان می دهد یک تصویر را از بسیاری جهات درون تصویر دیگر قرار دهید. مطمئناً ، این به مهارت هایی در طرح بندی صفحات وب نیاز دارد و شما باید روش خاصی را بر اساس کد موجود انتخاب کنید. با این حال ، در برخی موارد ، بدون ویرایش کد منبع می توانید این کار را انجام دهید.
دستورالعمل ها
مرحله 1
راهی برای قرار دادن یک تصویر در تصویر دیگر بدون تغییر در صفحات سایت وجود دارد. برای انجام این کار ، کافی است تصویر پس زمینه ذخیره شده در سرور را ویرایش کنید - از هر ویرایشگر گرافیکی استفاده کنید تا تصویر پیش زمینه را روی آن قرار دهید. اگر این روش برای شما مناسب است ، با تعیین محل ذخیره سازی و نام فایل تصویر پس زمینه شروع کنید. این کار را می توان با یافتن آن در کد منبع صفحه یا باز کردن آن در یک تب جداگانه و مشاهده مسیر کامل در نوار آدرس مرورگر انجام داد.
گام 2
با استفاده از مدیر فایل سیستم مدیریت محتوا یا سرویس گیرنده FTP ، فایل مورد نیاز را در رایانه خود بارگیری کنید و آن را در هر ویرایشگر گرافیکی - مثلاً در برنامه Paint نصب شده با ویندوز - باز کنید.
مرحله 3
تصویر پیش زمینه را روی پس زمینه قرار دهید - در بخش Paint برای این مورد ، باید از لیست کشویی "درج" در برگه "صفحه اصلی" مورد "Insert from" را انتخاب کرده و فایل مورد نیاز را در گفتگوی باز شده پیدا کنید. سپس موقعیت تصویر درج شده را روی پس زمینه موجود تنظیم کنید (آن را با ماوس بکشید) و نتیجه را ذخیره کنید (Ctrl + S).
مرحله 4
تصویر ویرایش شده را بارگیری کنید ، و تصویر قدیمی را جایگزین کنید. این روش را کامل می کند.
مرحله 5
روش توصیف شده در مواردی که تصاویر درج شده باید گاه به گاه تغییر کنند ، ناخوشایند است. سپس از قابلیت های زبان HTML استفاده کنید - برای مثال ، تصویر پس زمینه را پس زمینه عنصر صفحه ای کنید که تصویر پیش زمینه در آن قرار می گیرد. چنین عنصر ظرف می تواند مثلاً یک لایه (div) باشد. برای ایجاد بسیاری از تصاویر در پس زمینه خود ، باید از توضیحات سبک - ویژگی سبک برچسب div استفاده کنید. یک ظرف خالی در کد HTML ممکن است به این شکل باشد:
در پرانتز ، آدرس و نام فایل تصویر پس زمینه را در سایت خود نشان دهید.
مرحله 6
یک تگ تصویر پیش زمینه (img) ایجاد کنید ، با استفاده از همان ویژگی سبک ، مقدار لنت را از لبه های ظرف پس زمینه تنظیم کنید. مثلا:
در اینجا ، مشخصه های عرض و ارتفاع ، ابعاد تصویر را تنظیم می کنند و چهار عدد بعد از بالشتک نشان می دهد که بالشتک به صورت پیکسل از لبه های ظرف ، از بالا (50) و بیشتر در جهت عقربه های ساعت (60 - راست ، 70 -) شروع می شود. پایین ، 80 - چپ).
مرحله 7
برچسب img را در یک ظرف قرار دهید:
مرحله 8
خطوط ایجاد شده را به کد منبع صفحه اضافه کنید و سپس ، با تغییر فرورفتگی ها ، موقعیت تصویر درج شده را در برابر پس زمینه تصویر پس زمینه تنظیم کنید.
