Markeringsspråkets funktioner - HTML - och kaskad stilark - CSS - gör att du kan placera en bild i en annan på många sätt. Naturligtvis kräver detta vissa kunskaper i webbsidlayout, och du måste välja en specifik metod baserat på den befintliga koden. I vissa fall kan du dock göra det utan att redigera källkoden.
Instruktioner
Steg 1
Det finns ett sätt att placera en bild i en annan utan några ändringar på sidorna på webbplatsen. För att göra detta räcker det att redigera bakgrundsbilden som är lagrad på servern - använd vilken grafikredigerare som helst för att placera förgrundsbilden på den. Om den här metoden fungerar för dig, börja med att definiera lagringsplatsen och namnet på bakgrundsbildfilen. Detta kan göras genom att hitta den i källkoden på sidan eller genom att öppna den i en separat flik och titta på hela sökvägen i webbläsarens adressfält.
Steg 2
Använd filhanteraren för innehållshanteringssystemet eller FTP-klienten för att ladda ner den fil som krävs till din dator och öppna den i valfri grafikredigerare - till exempel i Paint-applikationen installerad med Windows.
Steg 3
Placera förgrundsbilden över bakgrunden - i Paint för detta måste du välja objektet "Infoga från" från rullgardinsmenyn "Infoga" på fliken "Hem" och hitta önskad fil i dialogrutan som öppnas. Justera sedan placeringen av den infogade bilden på den befintliga bakgrunden (dra den med musen) och spara resultatet (Ctrl + S).
Steg 4
Ladda tillbaka den redigerade bilden och skriv över den gamla. Detta slutför proceduren.
Steg 5
Den beskrivna metoden är obekväm i fallet då de infogade bilderna måste ändras då och då. Använd sedan funktionerna i HTML-språket - gör till exempel bakgrundsbilden till bakgrunden för det sidelement där förgrundsbilden kommer att placeras. Ett sådant behållarelement kan vara, säg, ett lager (div). För att göra en stor del av bilderna dess bakgrund måste du använda stilbeskrivningen - stilattributet för div-taggen. En tom behållare i HTML-kod kan se ut så här:
Inom parentes anger du adressen och namnet på bakgrundsbildfilen på din webbplats.
Steg 6
Skapa en förgrundsbild (img) -tagg med samma stilattribut för att ställa in mängden stoppning från kanterna på bakgrundsbehållaren. Till exempel:
Här anger bredd- och höjdattributen bildens mått och de fyra siffrorna efter stoppningen anger stoppningen i pixlar från behållarens kanter, från början (50) och vidare medurs (60 - höger, 70 - botten, 80 - vänster).
Steg 7
Placera img-taggen i en behållare:
Steg 8
Lägg till de skapade raderna i källkoden på sidan och justera sedan positionen för den infogade bilden mot bakgrunden till bakgrundsbilden genom att ändra indrag.
