ЯК на сайті вставити малюнок в малюнок

Можливості мови розмітки сторінок - HTML - і каскадних таблиць стилів - CSS - дозволяють помістити одне зображення в інше багатьма способами. Зрозуміло, це вимагає деяких навичок верстки веб-сторінок, а вибирати конкретний спосіб потрібно виходячи з вже існуючого коду. Проте в деяких випадках можна обійтися і без редагування вихідного коду.

Інструкція

Існує спосіб помістити одне зображення в інше без будь-яких змін на сторінках сайту. Для цього достатньо відредагувати зберігається на сервері фонову картинку - за допомогою будь-якого графічного редактора помістити на неї зображення переднього плану. Якщо цей спосіб вам підходить, почніть з визначення місця зберігання і назви файлу з фоновою картинкою. Це можна зробити, знайшовши її у вихідному коді сторінки або відкривши в окремій вкладці і подивившись повний шлях в адресному рядку браузера.

З використанням файл-менеджера системи управління сайтом або ФТП-клієнта скачайте потрібний файл в комп'ютер і відкрийте в будь-якому графічному редакторі - наприклад, у встановлюваному разом з ОС Windows додатку Paint.

Помістіть поверх фону картинку переднього плану - в Paint для цього треба зі списку «Вставити» на вкладці «Головна» вибрати пункт «Вставити з» і в діалозі знайти потрібний файл. Потім відрегулюйте положення вставленого зображення на існуючому фоні (потягати його мишкою) і збережіть результат (Ctrl + S).

Завантажте назад відредаговану картинку, перезаписавши стару. На цьому процедура буде завершена.

Описаний спосіб незручний в тому випадку, коли вставляються картинки потрібно час від часу міняти. Тоді використовуйте можливості мови HTML - наприклад, зробіть картинку заднього плану фоном того елементу сторінки, в який буде вміщено зображення переднього плану. Таким елементом-контейнером може служити, скажімо, шар (div). Зробити велику з картинок його фоном потрібно з використанням опису стилів - атрибуту style тега div. Порожній контейнер в HTML-коді може виглядати так:

У дужках вкажіть адресу та назву файлу фонового зображення на вашому сайті.

Складіть тег зображення переднього плану (img), задавши в ньому за допомогою того ж атрибуту style величини відступів від країв контейнера з фоном. Наприклад:

Тут атрибути width і height задають розміри зображення, а чотири числа після padding вказують відступи від країв контейнера в пікселах, починаючи з верхнього (50) і далі за годинниковою стрілкою (60 - праворуч, 70 - знизу, 80 - ліворуч).

Помістіть тег img в контейнер:

Додайте створені рядки у вихідний код сторінки, а потім, змінюючи відступи, відрегулюйте положення вставленої картинки на тлі зображення заднього плану.