Alle immagini su una pagina web a volte può essere aggiunto del testo. Le didascalie possono essere create su come posizionare il testo su un’immagine. Non puoi mettere il testo sopra un’immagine con solo elementi HTML. Abbiamo bisogno di usare le proprietà CSS per questo.
Gli sviluppatori web realizzano siti web di bell’aspetto in modo che gli utenti siano più interessati e felici. Il posizionamento del testo su un’immagine è un modo in cui gli sviluppatori aggiungono un elemento visivo a un sito web. Tenendo presente la reattività, è importante assicurarsi che il testo rimanga lo stesso anche se l’immagine si ridimensiona perché è reattiva.
Come posizionare il testo sopra un’immagine
Quando si crea una foto gallery o qualcosa del genere potrebbe essere necessario posizionare del testo o una descrizione della didascalia sull’immagine. Puoi utilizzare i metodi di posizionamento CSS in combinazione con la proprietà margin per posizionare o posizionare il testo sopra un’immagine (cioè l’elemento).
Angolo in alto a sinistra
La prima posizione del il testo in cui andremo a impostare è l’angolo in alto a sinistra dell’immagine. Utilizza il seguente frammento di codice.
CSS: impostiamo la posizione del primo elemento div su”relativo”in modo da poter impostare la posizione del secondo elemento div su”assoluto.” Al testo che andrà sull’immagine sono state assegnate dimensioni, peso, stile e colore. Le proprietà top e left sono state utilizzate per inserire il testo nell’angolo in alto a sinistra.
Angolo in basso a sinistra
Allo scopo di aggiungere un testo nell’angolo in basso a sinistra dell’immagine usa il codice indicato di seguito.
CSS: Il resto del codice è lo stesso, tuttavia, per posizionare il testo nell’angolo in basso a sinistra abbiamo impostato la proprietà bottom su 3 %, e ha lasciato la proprietà all’8%. Puoi modificare i valori di queste proprietà per capire come funzionano.
Centro
Allo stesso modo, per posizionare il tuo testo nella posizione centrale, considera l’esempio sotto indicato. Allo scopo di regolare il testo nella posizione centrale dell’immagine, abbiamo impostato la proprietà top e la proprietà left al 40%.
Angolo in alto a destra
Quello che abbiamo semplicemente fatto per posizionare il testo nell’angolo in alto a destra è che abbiamo impostato la proprietà superiore al 2% e la proprietà destra al 10%. Questa non è una regola ferrea, quindi puoi modificare questi valori in base ai tuoi desideri.
Angolo in basso a destra
Come puoi vedere, il resto del codice è il come negli esempi precedenti con l’unica differenza che per posizionare il testo nell’angolo in basso a destra abbiamo utilizzato la proprietà bottom e la proprietà right.
FAQ
Come cambio la posizione di testo in un’immagine?
Con la proprietà CSS position, puoi impostare dove il testo va sopra un’immagine. Puoi farlo inserendo l’immagine e il testo in un”div”in HTML. Quindi, rendi la posizione div”relativa”e la posizione del testo”assoluta”. Gli elementi assoluti vengono posizionati in base a dove si trova il loro elemento genitore (div).
Come faccio a posizionare il testo su un’immagine reattiva?
Puoi mettere del testo su un’immagine usando il Proprietà posizione CSS. Per fare ciò, aggiungi position:absolute al testo e position:relative all’immagine. Mettili entrambi all’interno di un elemento div>. Possiamo anche utilizzare le proprietà top, bottom, left e right per inserire il testo in un determinato punto dell’immagine.
Come faccio a specificare la posizione del testo nei CSS?
h1 { text-align: centro; } h2 { text-align: left; } h3 { text-align: right; … Allinea l’ultima riga di testo in tre elementi
: p.a { text-align-last: right; } p.b { text-align-last: center; } p.c { … Imposta l’allineamento verticale di un’immagine in un testo: img.a { vertical-align: baseline; } img.b { vertical-align: text-top; }