In dit bericht wordt uitgelegd hoe je een bijschrift onder een afbeelding schrijft.
Hoe schrijf je een bijschrift onder een afbeelding?
Om een bijschrift onder een afbeelding te schrijven, bieden we verschillende methoden die hieronder worden genoemd:
- Methode 1: afbeeldingsbijschrift toevoegen met behulp van HTML '
Element? - Methode 2: afbeeldingsbijschrift toevoegen met ' Element?
Methode 1: Hoe een afbeeldingsbijschrift toevoegen met behulp van het HTML-element '
'? Volg de volgende instructies om een afbeeldingsbijschrift toe te voegen:
- Voeg eerst de '
”-element, dat wordt gebruikt om op zichzelf staande inhoud weer te geven, mogelijk met een optioneel bijschrift. - Voeg vervolgens een '
' tag in de paragraaf ' ' label. Voeg de afbeelding toe door gebruik te maken van de ' src ” attribuut. De ' alles ” eigenschap toont de toegevoegde inhoud als de afbeelding om de een of andere reden niet werd weergegeven.
- Stel de afbeeldingsbreedte in als ' 200px ”.
- Dan de '
” tag wordt gebruikt om het bijschrift voor de afbeelding toe te voegen. Voeg bovendien het bijschrift toe tussen de tags ' ':
= 'TSL.png' alles = 'TSL-contentmakers' breedte = '200' >
U kunt zien dat de afbeelding met het opgegeven bijschrift is weergegeven:
Ga nu naar de tweede methode voor het toevoegen van het bijschrift met behulp van CSS.
Methode 2: afbeeldingsbijschrift toevoegen met behulp van het '
' -element?Om het bijschrift van de afbeelding toe te voegen met de '
” element, probeer dan de gegeven instructies uit:
- Maak een ' ” container en voeg een class attribuut toe met de naam “ beeldhouder ”.
- Heading-tag toevoegen ' ” voor het invoegen van de kop en stijl de kop volgens uw keuze.
- Voeg nog een “
”-element toe en voeg een “' tag samen met ' src ”, “ alles ' en ' breedte ” attributen tussen de div-container.
- Voeg een derde '
' toe met de klassenaam ' img-onderschrift ”. Geef vervolgens het bijschrift op tussen de '' -tags. Bovendien is de “
” element wordt gebruikt om één regeleinde toe te voegen:= 'beeldhouder' >
= 'kleur:rgb(95, 31, 245)' > HTML-afbeelding >
= 'TSL.png' alles = 'TSL-contentmakers' breedte = '200' >
= 'img-onderschrift' >
>
>U kunt zien dat het bijschrift voor de afbeelding met succes is toegevoegd:
Laten we nu naar de CSS-sectie gaan voor het toepassen van de eigenschappen.
Stijl “.image-holder” in CSS
Ga eerst naar de '
'element met een klasse' .beeldhouder ”. Pas vervolgens de volgende CSS-eigenschappen toe: .beeldhouder {
positie : familielid ;
hoogte : 100px ;
breedte : 200px ;
marge : auto ;
}De details van de bovengenoemde eigenschappen worden hieronder beschreven:
- De ' positie ” is ingesteld als “ familielid ” om de oorspronkelijke positie van een element op te geven die in de stroom van het document blijft, net als de statische waarde.
- Dan, ' hoogte ” wordt gebruikt om de elementhoogte te definiëren.
- De ' breedte ” eigenschap specificeert de grootte van het element in de breedte.
- De ' marge ” is ingesteld als “ auto ” om de ruimte automatisch rond het element in te stellen.
Stijlbijschrift in CSS
In deze stap krijgen we toegang tot de twee klassen met de naam ' beeldhouder ' en ' img-bijschrift ” en pas de volgende CSS-eigenschappen toe:
.beeldhouder .img-bijschrift {
positie : absoluut ;
tekst uitlijnen : centrum ;
lettertype dikte : stoutmoedig ;
breedte : 200px ;
hoogte : 50px ;
links : 0px ;
kleur : #f80909 ;
achtergrond : RGB ( 140 , 166 , 253 ) ;
}De beschrijving van de bovengenoemde eigenschappen is als volgt:
- De ' tekst uitlijnen ” eigendom is ingesteld als “ centrum ” voor het uitlijnen van de tekstpositie in het midden.
- Volgende, ' lettertype dikte ” is toegewezen als “ stoutmoedig ” om het lettertype van de afbeeldingsbijschrift in te stellen.
- Dan de ' kleur ” eigenschap wordt gebruikt voor het instellen van de kleur van het geopende element.
- De ' achtergrond ” eigenschap stelt de kleur van de achtergrond van het element in.
- Andere eigendommen, waaronder ' positie ”, “ hoogte ', en ' breedte ” worden ook gebruikt om de respectievelijke functionaliteiten toe te passen.
Uitgang
We hebben de methoden besproken om het bijschrift onder een afbeelding te schrijven.
Gevolgtrekking
Om een bijschrift onder een afbeelding te schrijven, kunnen gebruikers de '
” element of een simpele “ ” container. Om de '' te gebruiken, voegt u eerst de ' ” element om de afbeelding in te sluiten in de “
'-element, gebruik dan het ' '-element en voeg een bijschrift toe tussen de tags. Bij de tweede benadering kunnen gebruikers eenvoudig de ' '-element en pas verschillende CSS-eigenschappen toe om het bijschrift mooier te maken. Dit bericht heeft de methoden gedemonstreerd voor het schrijven van het bijschrift onder een afbeelding.
- Voeg eerst de '