Le capacità del linguaggio di markup - HTML - e dei fogli di stile a cascata - CSS - consentono di posizionare un'immagine all'interno di un'altra in molti modi. Ovviamente, ciò richiede alcune abilità nel layout della pagina Web e devi scegliere un metodo specifico basato sul codice esistente. Tuttavia, in alcuni casi, puoi fare a meno di modificare il codice sorgente.
Istruzioni
Passo 1
C'è un modo per inserire un'immagine in un'altra senza alcuna modifica nelle pagine del sito. Per fare ciò, è sufficiente modificare l'immagine di sfondo memorizzata sul server: utilizzare qualsiasi editor di grafica per posizionare l'immagine in primo piano su di essa. Se questo metodo funziona per te, inizia definendo la posizione di archiviazione e il nome del file immagine di sfondo. Questo può essere fatto trovandolo nel codice sorgente della pagina o aprendolo in una scheda separata e guardando il percorso completo nella barra degli indirizzi del browser.
Passo 2
Utilizzando il file manager del sistema di gestione dei contenuti o il client FTP, scarica il file richiesto sul tuo computer e aprilo in qualsiasi editor di grafica, ad esempio nell'applicazione Paint installata con Windows.
Passaggio 3
Posiziona l'immagine in primo piano sullo sfondo: in Paint per questo è necessario selezionare l'elemento "Inserisci da" dall'elenco a discesa "Inserisci" nella scheda "Home" e trovare il file richiesto nella finestra di dialogo che si apre. Quindi regola la posizione dell'immagine inserita sullo sfondo esistente (trascinala con il mouse) e salva il risultato (Ctrl + S).
Passaggio 4
Ricarica l'immagine modificata, sovrascrivendo quella vecchia. Questo completa la procedura.
Passaggio 5
Il metodo descritto è scomodo nel caso in cui le immagini inserite debbano essere modificate di volta in volta. Quindi utilizzare le funzionalità del linguaggio HTML, ad esempio, rendere l'immagine di sfondo lo sfondo dell'elemento della pagina in cui verrà posizionata l'immagine in primo piano. Un tale elemento contenitore può essere, ad esempio, un livello (div). Per fare in modo che una grande delle immagini sia lo sfondo, è necessario utilizzare la descrizione dello stile, l'attributo di stile del tag div. Un contenitore vuoto nel codice HTML potrebbe avere il seguente aspetto:
Tra parentesi, indica l'indirizzo e il nome del file immagine di sfondo sul tuo sito.
Passaggio 6
Crea un tag immagine in primo piano (img), utilizzando lo stesso attributo di stile per impostare la quantità di riempimento dai bordi del contenitore di sfondo. Per esempio:
Qui, gli attributi di larghezza e altezza impostano le dimensioni dell'immagine e i quattro numeri dopo il padding indicano il padding in pixel dai bordi del contenitore, partendo dall'alto (50) e più avanti in senso orario (60 - destra, 70 - in basso, 80 - sinistra).
Passaggio 7
Posiziona il tag img in un contenitore:
Passaggio 8
Aggiungi le righe create al codice sorgente della pagina, quindi, modificando i rientri, regola la posizione dell'immagine inserita sullo sfondo dell'immagine di sfondo.
