Come posizionare il testo su un'immagine?

Spesso gli sviluppatori Web desiderano posizionare un po 'di testo su un'immagine per visualizzare alcune informazioni su quella particolare immagine. Questo può anche svolgere un ruolo importante nel rendere più attraente il tuo sito Web o l'immagine, migliorando quindi la possibilità di attirare l'attenzione dell'utente. Ora ci sono varie posizioni in cui è possibile aggiungere il tuo testo su un'immagine come segue.

1. Angolo in alto a sinistra
2. Angolo in basso a sinistra
3. Centro
4. Angolo in alto a destra
5. Angolo in basso a destra

Di seguito abbiamo dimostrato ciascuna di queste posizioni.

Posizionare il testo su un'immagine

Prima di tutto, aggiungeremo un'immagine alla nostra pagina web usando HTML.

Html

Un po 'di testo

Nel codice sopra, abbiamo creato un elemento div e nidificato un'immagine e un altro elemento Div. Il primo div, come già accennato, contiene l'immagine e l'altro div. Nel frattempo, il secondo contenitore Div mantiene la posizione e lo stile del testo che deve essere posizionato sull'immagine.

Produzione

Un'immagine è stata inserita nella pagina web.

Angolo in alto a sinistra

La prima posizione del testo in cui stiamo per impostare è l'angolo in alto a sinistra dell'immagine. Utilizzare il seguente frammento di codice.

CSS

.img-container
Posizione: relativo;
larghezza: 400px;

.Immagine
larghezza: 100%

.a sinistra in alto
Posizione: assoluto;
Font-size: 20px;
Font-weight: audace;
Font in stile: corsivo;
colore bianco;
Top: 15px;
A sinistra: 30px;

La posizione del primo elemento Div è stata impostata su un parente in modo da poter assolutamente posizionare il secondo elemento Div. Il testo da posizionare sull'immagine è stato dato una certa dimensione, peso, stile e colore, nel frattempo per posizionarlo nell'angolo in alto a sinistra abbiamo usato le proprietà superiore e sinistra.

Produzione

Il testo è stato posizionato con successo 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 utilizzare il codice di seguito.

CSS

.div
Posizione: relativo;
larghezza: 400px;

.Immagine
larghezza: 100%

.in basso a sinistra
Posizione: assoluto;
Font-size: 20px;
Font-weight: audace;
Font in stile: corsivo;
colore bianco;
In basso: 3%;
A sinistra: 8%;

Il resto del codice è lo stesso, tuttavia, per posizionare il testo nell'angolo in basso a sinistra abbiamo impostato la proprietà inferiore al 3%e lasciato la proprietà all'8%. Puoi modificare i valori di queste proprietà per capire come funzionano questi.

Produzione

Il testo era posizionato nell'angolo in basso a sinistra con grande facilità.

Centro

Allo stesso modo, per posizionare il testo nella posizione centrale, considera l'esempio di seguito.

CSS

.div
Posizione: relativo;
larghezza: 400px;

.Immagine
larghezza: 100%

.Centro
Posizione: assoluto;
Font-size: 20px;
Font-weight: audace;
Font in stile: corsivo;
colore bianco;
Top: 40%;
A sinistra: 40%;

Al fine di regolare il testo sulla posizione centrale dell'immagine, abbiamo impostato la proprietà superiore e lasciato la proprietà al 40%.

Produzione

Abbiamo posizionato con successo il testo al centro dell'immagine

Angolo in alto a destra

Consultare il codice qui sotto per capire come posizionare il testo nell'angolo in alto a destra dell'immagine.

CSS

.div
Posizione: relativo;
larghezza: 400px;

.Immagine
larghezza: 100%

.in alto a destra
Posizione: assoluto;
Top: 2%;
a destra: 10%;
Font-size: 20px;
Font-weight: audace;
Font in stile: corsivo;
colore bianco;

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 dura e veloce, quindi puoi cambiare questi valori in base al tuo desiderio.

Produzione

Il testo è stato inserito nell'angolo in alto a destra dell'immagine.

Angolo in basso a destra

L'ultima posizione che stiamo per dimostrare è l'angolo in basso a destra dell'immagine. Segui il codice qui sotto.

CSS

.div
Posizione: relativo;
larghezza: 400px;

.Immagine
larghezza: 100%

.in basso a destra
Posizione: assoluto;
In basso: 5%;
a destra: 10%;
Font-size: 20px;
Font-weight: audace;
Font in stile: corsivo;
colore bianco;

Come puoi vedere che il resto del codice è lo stesso degli esempi precedenti con solo differenza che per posizionare il testo nell'angolo in basso a destra abbiamo usato la proprietà inferiore e la proprietà giusta.

Produzione

Il testo è stato posizionato nell'angolo in basso a destra.

Conclusione

Per posizionare il testo su un'immagine posiziona l'immagine e il testo all'interno di un contenitore div e posizionano assolutamente il testo, nel frattempo dando al Div una posizione relativa. Posizioni diverse che puoi posizionare il testo su un'immagine sono l'angolo in alto a sinistra, l'angolo in basso a sinistra, il centro, l'angolo in alto a destra e l'angolo in basso a destra. Questa attività può essere eseguita utilizzando varie proprietà CSS. In questo post abbiamo dimostrato ciascuna di queste posizioni insieme a esempi adeguati.