Merkintäkielen - HTML - ja CSS - CSS-ominaisuuksien avulla voit sijoittaa kuvan toiseen monin tavoin. Tietysti tämä vaatii joitain taitoja verkkosivujen asetteluun, ja sinun on valittava tietty menetelmä olemassa olevan koodin perusteella. Joissakin tapauksissa voit kuitenkin tehdä muokkaamatta lähdekoodia.
Ohjeet
Vaihe 1
On tapa sijoittaa yksi kuva toiseen ilman muutoksia sivuston sivuilla. Tätä varten riittää, että muokkaat palvelimelle tallennettua taustakuvaa - sijoita etualan kuva mihin tahansa grafiikkaeditoriin. Jos tämä menetelmä toimii sinulle, aloita määrittämällä taustakuvatiedoston tallennuspaikka ja nimi. Tämä voidaan tehdä etsimällä se sivun lähdekoodista tai avaamalla se erilliselle välilehdelle ja katsomalla koko polkua selaimen osoiterivillä.
Vaihe 2
Lataa sisällönhallintajärjestelmän tai FTP-asiakasohjelman tiedostojen hallinnan avulla tarvittava tiedosto tietokoneellesi ja avaa se missä tahansa grafiikkaeditorissa - esimerkiksi Windowsin kanssa asennetussa Paint-sovelluksessa.
Vaihe 3
Sijoita etualan kuva taustan päälle - Paintissa tätä varten sinun on valittava "Lisää kohteesta" -kohde "Koti" -välilehden avattavasta Lisää-luettelosta ja löydettävä tarvittava tiedosto avautuvasta valintaikkunasta. Säädä sitten lisätyn kuvan sijainti olemassa olevalla taustalla (vedä sitä hiirellä) ja tallenna tulos (Ctrl + S).
Vaihe 4
Lataa muokattu kuva takaisin korvaamalla vanha. Tämä saattaa menettelyn päätökseen.
Vaihe 5
Kuvattu menetelmä on hankala siinä tapauksessa, että lisättyjä kuvia on aika ajoin vaihdettava. Käytä sitten HTML-kielen ominaisuuksia - tee esimerkiksi taustakuvasta sen sivuelementin tausta, johon etualan kuva sijoitetaan. Tällainen konttielementti voi olla esimerkiksi kerros (div). Jos haluat suuresta kuvasta sen taustan, sinun on käytettävä tyylin kuvausta - div-tagin tyylimääritettä. Tyhjä säiliö HTML-koodissa saattaa näyttää tältä:
Ilmoita sulkeissa sivustosi taustakuvatiedoston osoite ja nimi.
Vaihe 6
Luo etualan kuva (img) -tunniste samalla tyylimääritteellä asettaaksesi täytteen määrän taustakontin reunoista. Esimerkiksi:
Tässä leveys- ja korkeusattribuutit asettavat kuvan mitat, ja täytteen jälkeen olevat neljä numeroa osoittavat täyte pikseleinä astian reunoista alkaen yläosasta (50) ja myötäpäivään (60 - oikea, 70 - alhaalla, 80 - vasemmalla).
Vaihe 7
Aseta img-tunniste astiaan:
Vaihe 8
Lisää luodut rivit sivun lähdekoodiin ja säädä sitten sisennyksiä muuttamalla lisätyn kuvan sijaintia taustakuvan taustaa vasten.
