Det här inlägget förklarar hur du skriver en bildtext under en bild.
Hur man skriver en bildtext under en bild?
För att skriva en bildtext under en bild kommer vi att tillhandahålla olika metoder som nämns nedan:
- Metod 1: Hur man lägger till bildtext med HTML '
' Element? - Metod 2: Hur man lägger till bildtext med ' ' Element?
Metod 1: Hur lägger man till bildtext med HTML-elementet '
'? För att lägga till en bildtext, gå igenom följande instruktioner:
- Lägg först till '
”-element, som används för att representera fristående innehåll, eventuellt med en valfri bildtext. - Sätt sedan in en '
' taggen inuti stycket ' '-tagg. Lägg till bilden genom att använda ' src ' attribut. den ' allt Egenskapen visar det tillagda innehållet om bilden inte visades av någon anledning.
- Ställ in bildens bredd som ' 200 pixlar ”.
- Sedan '
”-taggen används för att lägga till bildtexten för bilden. Lägg dessutom till bildtexten mellan ' '-taggarna:
= 'TSL.png' allt = 'TSL-innehållsskapare' bredd = '200' >
Du kan se att bilden med den angivna bildtexten har visats:
Gå nu mot den andra metoden för att lägga till bildtexten med CSS.
Metod 2: Hur lägger man till bildtext med hjälp av elementet
?För att lägga till bildtexten med '
' element, prova de givna instruktionerna:
- Skapa en ' '-behållare och lägg till ett klassattribut med namnet ' bildhållare ”.
- Lägg till rubriktagg ' ” för att infoga rubriken och formatera rubriken enligt ditt val.
- Lägg till ett annat '
'-element och infoga ett '' tagga tillsammans med ' src ”, “ allt ' och ' bredd ”-attribut mellan div-behållaren.
- Lägg till en tredje '
' med klassnamnet ' img-bildtext ”. Ange sedan bildtexten mellan ''-taggarna. Dessutom har '
element används för att lägga till en radbrytning:= 'bildhållare' >
= 'color:rgb(95, 31, 245)' > HTML-bild >
= 'TSL.png' allt = 'TSL-innehållsskapare' bredd = '200' >
= 'img-caption' >
>
>Det kan observeras att bildtexten för bilden har lagts till framgångsrikt:
Låt oss nu gå mot CSS-sektionen för att tillämpa egenskaperna.
Stil '.image-holder' i CSS
Gå först till '
' element som har en klass ' .bildhållare ”. Använd sedan följande CSS-egenskaper: .bildhållare {
placera : relativ ;
höjd : 100 pixlar ;
bredd : 200 pixlar ;
marginal : bil ;
}Detaljerna för ovan nämnda egenskaper beskrivs nedan:
- den ' placera ' är inställd som ' relativ ” för att specificera ett elements ursprungliga position som finns kvar i dokumentets flöde, precis som det statiska värdet.
- Sedan, ' höjd ” används för att definiera elementhöjden.
- den ' bredd ” egenskapen anger storleken på elementet i bredd.
- den ' marginal ' är inställd som ' bil ” för att ställa in utrymmet automatiskt runt elementet.
Style Caption i CSS
I det här steget kommer vi åt de två klasserna med namnet ' bildhållare ' och ' img-bildtext ' och tillämpa följande CSS-egenskaper:
.bildhållare .img-caption {
placera : absolut ;
textjustera : Centrum ;
teckensnittsvikt : djärv ;
bredd : 200 pixlar ;
höjd : 50 px ;
vänster : 0px ;
Färg : #f80909 ;
bakgrund : rgb ( 140 , 166 , 253 ) ;
}Beskrivningen av ovan nämnda fastigheter är som följer:
- den ' textjustera ' egenskapen är inställd som ' Centrum ” för att justera textpositionen i mitten.
- Nästa, ' teckensnittsvikt ” tilldelas som ” djärv ” för att ställa in bildtextens teckensnitt.
- Sedan ' Färg ”-egenskapen används för att ställa in färgen på det accessade elementet.
- den ' bakgrund ” egenskapen anger färgen på elementets bakgrund.
- Andra fastigheter, inklusive ' placera ”, “ höjd ', och ' bredd ” används också för att tillämpa respektive funktionalitet.
Produktion
Vi har diskuterat metoderna för att skriva bildtexten under en bild.
Slutsats
För att skriva en bildtext under en bild kan användare antingen använda '
' element eller en enkel ' ' behållare. För att använda '', lägg först till ' ' element för att bädda in bilden i '
'-elementet, använd sedan ' '-elementet och lägg till en bildtext mellan dess taggar. I det andra tillvägagångssättet kan användare helt enkelt använda ' ” och använd olika CSS-egenskaper för att försköna bildtexten. Det här inlägget har demonstrerat metoderna för att skriva bildtexten under en bild.
- Lägg först till '