Как да вмъкнете снимка в снимка на уебсайта

Съдържание:

Как да вмъкнете снимка в снимка на уебсайта
Как да вмъкнете снимка в снимка на уебсайта

Видео: Как да вмъкнете снимка в снимка на уебсайта

Видео: Как да вмъкнете снимка в снимка на уебсайта
Видео: Монтаж снимка с помщью маски слоя CS 2024, Април
Anonim

Възможностите на езика за маркиране - HTML - и каскадни таблици със стилове - CSS - ви позволяват да поставите едно изображение в друго по много начини. Разбира се, това изисква някои умения в оформлението на уеб страницата и трябва да изберете конкретен метод въз основа на съществуващия код. В някои случаи обаче можете да направите без редактиране на изходния код.

Как да вмъкнете снимка в снимка на уебсайта
Как да вмъкнете снимка в снимка на уебсайта

Инструкции

Етап 1

Има начин да поставите едно изображение в друго, без да се променят страниците на сайта. За да направите това, достатъчно е да редактирате фоновото изображение, съхранявано на сървъра - използвайте всеки графичен редактор, за да поставите изображението на преден план върху него. Ако този метод работи за вас, започнете с дефиниране на мястото за съхранение и името на файла с фоновото изображение. Това може да стане, като го намерите в изходния код на страницата или като го отворите в отделен раздел и погледнете пълния път в адресната лента на браузъра.

Стъпка 2

Използвайки файловия мениджър на системата за управление на съдържанието или FTP клиент, изтеглете необходимия файл на вашия компютър и го отворете във всеки графичен редактор - например в приложението Paint, инсталирано с Windows.

Стъпка 3

Поставете снимката на преден план върху фона - в Paint за това трябва да изберете елемента „Вмъкване от“от падащия списък „Вмъкване“в раздела „Начало“и да намерите необходимия файл в диалоговия прозорец, който се отваря. След това коригирайте позицията на вмъкнатото изображение върху съществуващия фон (плъзнете го с мишката) и запазете резултата (Ctrl + S).

Стъпка 4

Заредете обратно редактираната снимка, като презапишете старата. Това завършва процедурата.

Стъпка 5

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

В скоби посочете адреса и името на файла с фоновото изображение на вашия сайт.

Стъпка 6

Създайте таг за изображение на преден план (img), като използвате същия атрибут за стил, за да зададете количеството подложка от краищата на фоновия контейнер. Например:

Тук атрибутите ширина и височина задават размерите на изображението, а четирите цифри след подложката показват подложката в пиксели от краищата на контейнера, започвайки отгоре (50) и по-нататък по посока на часовниковата стрелка (60 - вдясно, 70 - отдолу, 80 - вляво).

Стъпка 7

Поставете маркера img в контейнер:

Стъпка 8

Добавете създадените редове към изходния код на страницата и след това, като промените отстъпите, коригирайте позицията на вмъкнатото изображение на фона на фоновото изображение.

Препоръчано: