Questo post spiega come scrivere una didascalia sotto un'immagine.
Come scrivere una didascalia sotto un'immagine?
Per scrivere una didascalia sotto un'immagine, forniremo diversi metodi indicati di seguito:
- Metodo 1: come aggiungere una didascalia all'immagine utilizzando l'HTML '
” Elemento? - Metodo 2: come aggiungere una didascalia all'immagine utilizzando ' ” Elemento?
Metodo 1: come aggiungere una didascalia all'immagine utilizzando l'elemento HTML '
'? Per aggiungere una didascalia all'immagine, seguire le seguenti istruzioni:
- Innanzitutto, aggiungi il '
” elemento, che viene utilizzato per rappresentare contenuto autonomo, potenzialmente con una didascalia facoltativa. - Successivamente, inserisci un '
” tag all'interno del paragrafo “ etichetta '. Aggiungere l'immagine utilizzando il ' src 'attributo. Il ' Tutto quanto La proprietà ” mostra il contenuto aggiunto se l'immagine non è stata visualizzata per qualche motivo. - Imposta la larghezza dell'immagine come ' 200 pixel ”.
- Poi il '
Il tag ” viene utilizzato per aggiungere la didascalia all'immagine. Inoltre, aggiungi la didascalia tra i tag ' ':
= 'TSL.png' Tutto quanto = 'Creatori di contenuti TSL' larghezza = '200' >
Puoi vedere che l'immagine con la didascalia specificata è stata visualizzata:
Ora, passa al secondo metodo per aggiungere la didascalia usando i CSS.
Metodo 2: come aggiungere una didascalia all'immagine utilizzando l'elemento '
'?Per aggiungere la didascalia dell'immagine utilizzando il pulsante '
” , prova le istruzioni fornite:
- Creare un ' ” contenitore e aggiungi un attributo di classe con il nome “ porta immagine ”.
- Aggiungi tag di intestazione ' ” per inserire l'intestazione e modellare l'intestazione in base alla tua scelta.
- Aggiungi un altro elemento '
' e inserisci un '” etichetta insieme a “ src ”, “ Tutto quanto ' e ' larghezza ” attributi tra il contenitore div. - Aggiungi un terzo '
' con il nome della classe ' img-caption ”. Quindi, fornisci la didascalia tra i tag ''. Inoltre, il “
L'elemento ” viene utilizzato per aggiungere un'interruzione di riga:= 'portaimmagini' >
= 'colore:rgb(95, 31, 245)' > Immagine HTML >
= 'TSL.png' Tutto quanto = 'Creatori di contenuti TSL' larghezza = '200' >
= 'img-didascalia' >
>
>Si può osservare che la didascalia per l'immagine è stata aggiunta con successo:
Passiamo ora alla sezione CSS per l'applicazione delle proprietà.
Stile '.image-holder' in CSS
Per prima cosa, accedi al '
” elemento avente una classe “ .portaimmagine ”. Quindi, applica le seguenti proprietà CSS: .portaimmagine {
posizione : parente ;
altezza : 100 pixel ;
larghezza : 200 pixel ;
margine : auto ;
}I dettagli delle proprietà sopra citate sono descritti di seguito:
- Il ' posizione ” è impostato come “ parente ” per specificare la posizione originale di un elemento che rimane nel flusso del documento, proprio come il valore statico.
- Quindi, ' altezza ” viene utilizzato per definire l'altezza dell'elemento.
- Il ' larghezza La proprietà ” specifica la dimensione dell'elemento in larghezza.
- Il ' margine ” è impostato come “ auto ” per impostare automaticamente lo spazio attorno all'elemento.
Didascalia di stile in CSS
In questo passaggio, accederemo alle due classi con il nome ' porta immagine ' e ' img-caption ” e applica le seguenti proprietà CSS:
.portaimmagine .img-didascalia {
posizione : assoluto ;
allineamento del testo : centro ;
font-weight : grassetto ;
larghezza : 200 pixel ;
altezza : 50 pixel ;
sinistra : 0px ;
colore : #f80909 ;
sfondo : rgb ( 140 , 166 , 253 ) ;
}La descrizione delle suddette proprietà è la seguente:
- Il ' allineamento del testo La proprietà 'è impostata come' centro ” per allineare la posizione del testo al centro.
- Prossimo, ' font-weight ” è assegnato come “ grassetto ” per impostare il carattere della didascalia dell'immagine.
- Poi il ' colore La proprietà ” viene utilizzata per impostare il colore dell'elemento a cui si accede.
- Il ' sfondo La proprietà ” imposta il colore dello sfondo dell'elemento.
- Altre proprietà, tra cui “ posizione ”, “ altezza ', e ' larghezza ” sono utilizzati anche per applicare le rispettive funzionalità.
Produzione
Abbiamo discusso i metodi per scrivere la didascalia sotto un'immagine.
Conclusione
Per scrivere una didascalia sotto un'immagine, gli utenti possono utilizzare il '
” elemento o un semplice “ 'contenitore. Per utilizzare '', per prima cosa aggiungi ' ” elemento per incorporare l'immagine all'interno del “ ”, quindi, utilizza l'elemento “ ” e aggiungi una didascalia tra i suoi tag. Nel secondo approccio, gli utenti possono semplicemente utilizzare il ' ” e applica diverse proprietà CSS per abbellire la didascalia. Questo post ha dimostrato i metodi per scrivere la didascalia sotto un'immagine.
- Innanzitutto, aggiungi il '