Sådan Indsættes Et Billede I Et Billede På Hjemmesiden

Indholdsfortegnelse:

Sådan Indsættes Et Billede I Et Billede På Hjemmesiden
Sådan Indsættes Et Billede I Et Billede På Hjemmesiden

Video: Sådan Indsættes Et Billede I Et Billede På Hjemmesiden

Video: Sådan Indsættes Et Billede I Et Billede På Hjemmesiden
Video: How to Add Images using HTML into a Webpage | Lesson 05 | HTML 2024, April
Anonim

Markeringssprogets muligheder - HTML - og kaskadestilark - CSS - giver dig mulighed for at placere et billede inden for et andet på mange måder. Selvfølgelig kræver dette nogle færdigheder i websidelayout, og du skal vælge en bestemt metode baseret på den eksisterende kode. I nogle tilfælde kan du dog undvære at redigere kildekoden.

Sådan indsættes et billede i et billede på hjemmesiden
Sådan indsættes et billede i et billede på hjemmesiden

Instruktioner

Trin 1

Der er en måde at placere et billede i et andet uden ændringer på siderne på webstedet. For at gøre dette er det nok at redigere det baggrundsbillede, der er gemt på serveren - brug en hvilken som helst grafikeditor til at placere forgrundsbilledet på det. Hvis denne metode virker for dig, skal du starte med at definere lagerplacering og navn på baggrundsbilledfilen. Dette kan gøres ved at finde den i kildekoden på siden eller ved at åbne den i en separat fane og se på den fulde sti i browserens adresselinje.

Trin 2

Brug filhåndteringen af indholdsstyringssystemet eller FTP-klienten til at downloade den nødvendige fil til din computer og åbne den i en hvilken som helst grafikeditor - for eksempel i Paint-applikationen installeret med Windows.

Trin 3

Placer forgrundsbilledet over baggrunden - i Paint til dette skal du vælge elementet "Indsæt fra" på rullelisten "Indsæt" på fanen "Hjem" og finde den ønskede fil i dialogboksen, der åbnes. Juster derefter placeringen af det indsatte billede på den eksisterende baggrund (træk det med musen), og gem resultatet (Ctrl + S).

Trin 4

Indlæs det redigerede billede igen, og overskriv det gamle. Dette afslutter proceduren.

Trin 5

Den beskrevne metode er ubelejlig, når de indsatte billeder skal ændres fra tid til anden. Brug derefter funktionerne i HTML-sproget - lav f.eks. Baggrundsbilledet til baggrunden for det sideelement, hvor forgrundsbilledet placeres. Et sådant containerelement kan f.eks. Være et lag (div). For at gøre et stort af billederne til baggrunden skal du bruge stilbeskrivelsen - stilattributten for div-tagget. En tom beholder i HTML-kode kan se sådan ud:

I parentes skal du angive adressen og navnet på baggrundsbilledfilen på dit websted.

Trin 6

Opret et forgrundsbillede (img) -tag ved hjælp af den samme typeattribut til at indstille mængden af polstring fra kanterne på baggrundsbeholderen. For eksempel:

Her angiver bredde- og højdeattributterne billedets dimensioner, og de fire tal efter polstringen angiver polstringen i pixels fra beholderens kanter, startende øverst (50) og yderligere med uret (60 - højre, 70 - nederst, 80 - venstre).

Trin 7

Placer img-koden i en container:

Trin 8

Føj de oprettede linjer til kildekoden på siden, og juster derefter placeringen af det indsatte billede mod baggrunden af baggrundsbilledet, når du ændrer indrykningerne.

Anbefalede: