Możliwości języka znaczników - HTML - i kaskadowych arkuszy stylów - CSS - pozwalają na umieszczenie jednego obrazu w drugim na wiele sposobów. Oczywiście wymaga to pewnych umiejętności w zakresie układu strony internetowej i musisz wybrać konkretną metodę w oparciu o istniejący kod. Jednak w niektórych przypadkach możesz obejść się bez edycji kodu źródłowego.
Instrukcje
Krok 1
Istnieje sposób na umieszczenie jednego obrazu w drugim bez żadnych zmian na stronach serwisu. W tym celu wystarczy edytować obraz tła przechowywany na serwerze - użyj dowolnego edytora graficznego, aby umieścić na nim obraz pierwszego planu. Jeśli ta metoda działa, zacznij od określenia lokalizacji przechowywania i nazwy pliku obrazu tła. Można to zrobić, odnajdując go w kodzie źródłowym strony lub otwierając go w osobnej zakładce i patrząc na pełną ścieżkę w pasku adresu przeglądarki.
Krok 2
Korzystając z menedżera plików systemu zarządzania treścią lub klienta FTP, pobierz wymagany plik na swój komputer i otwórz go w dowolnym edytorze graficznym - na przykład w aplikacji Paint zainstalowanej z systemem Windows.
Krok 3
Umieść obraz pierwszego planu na tle - w programie Paint musisz wybrać element „Wstaw z” z listy rozwijanej „Wstaw” na karcie „Strona główna” i znaleźć wymagany plik w otwartym oknie dialogowym. Następnie dostosuj położenie wstawionego obrazu na istniejącym tle (przeciągnij go myszką) i zapisz wynik (Ctrl + S).
Krok 4
Załaduj z powrotem edytowany obraz, nadpisując stary. To kończy procedurę.
Krok 5
Opisana metoda jest niewygodna w przypadku, gdy wstawiane zdjęcia wymagają okresowej zmiany. Następnie skorzystaj z możliwości języka HTML - np. ustaw obraz tła jako tło elementu strony, w którym zostanie umieszczony obraz pierwszego planu. Takim elementem kontenerowym może być np. warstwa (div). Aby duży obraz stał się tłem, musisz użyć opisu stylu - atrybutu stylu znacznika div. Pusty kontener w kodzie HTML może wyglądać tak:
W nawiasach podaj adres i nazwę pliku obrazu tła w swojej witrynie.
Krok 6
Utwórz znacznik obrazu pierwszego planu (img), używając tego samego atrybutu stylu, aby ustawić wielkość dopełnienia od krawędzi kontenera tła. Na przykład:
Tutaj atrybuty width i height określają wymiary obrazu, a cztery liczby po dopełnieniu wskazują dopełnienie w pikselach od krawędzi pojemnika, zaczynając od góry (50) i dalej zgodnie z ruchem wskazówek zegara (60 - prawy, 70 - dolny, 80 - lewy).
Krok 7
Umieść tag img w pojemniku:
Krok 8
Dodaj utworzone linie do kodu źródłowego strony, a następnie zmieniając wcięcia dostosuj położenie wstawionego obrazu względem tła obrazu tła.
