Hvordan skrive en bildetekst under et bilde? - CSS

I HTML/CSS kan brukere legge til forskjellige bilder og logoer mens de oppretter websider. Videre tillater det brukere å legge til en bildetekst av bildet og logge inn forskjellige skjemaer. For eksempel kan brukere legge til bildeteksten under bildet, øverst, venstre eller høyre. For dette formålet, "”Element brukes.

Dette innlegget forklarer om å skrive en bildetekst under et bilde.

Hvordan skrive en bildetekst under et bilde?

For å skrive en bildetekst under et bilde, vil vi gi forskjellige metoder nevnt nedenfor:

• Metode 1: Hvordan legge til bildebilde ved hjelp av HTML “”Element?
• Metode 2: Hvordan legge til bildebilde ved hjelp av “”Element?

Metode 1: Hvordan legge til bildebilde ved hjelp av HTML “” element?

For å legge til en bildetekst, gå gjennom følgende instruksjoner:

• Først, legg til “”Element, som brukes til å representere selvstendig innhold, potensielt med en valgfri bildetekst.
• Deretter setter du inn en "”Tag i avsnittet”

  " stikkord. Legg til bildet ved å bruke "src" Egenskap. “altEiendom viser det ekstra innholdet hvis bildet ikke vises på grunn av noen grunn.

• Angi bildebredden som "200px”.
• Og så "”Tag brukes til å legge til bildeteksten for bildet. Legg dessuten bildeteksten mellom "" -merkerne:

>

Du kan se at bildet med den spesifiserte bildeteksten er vist:

Gå nå mot den andre metoden for å legge til bildeteksten ved hjelp av CSS.

Metode 2: Hvordan legge til bildebilde ved hjelp av “” element?

For å legge til bildeteksten ved hjelp av “”Element, prøv de gitte instruksjonene:

• Lage en "”Container og legg til en klasseattributt med navnet”Bildeholder”.
• Legg til heading tag "

  ”For å sette inn overskriften og style overskriften i henhold til ditt valg.

• Legg til et annet “” element og sett inn et “”Tag sammen med“src”,“alt”Og“bredde”Attributter mellom Div Container.
• Legg til en tredje “” med klassenavnet ”IMG-Caption”. Gi deretter bildeteksten mellom "" -merkerne. Dessuten "
  ”Element brukes til å legge til en linjepause:

HTML -bilde

TSL -innholdsskapere

Det kan observeres at bildeteksten til bildet er lagt til vellykket:

La oss nå gå mot CSS -delen for å bruke eiendommene.

Stil ".bildeholder ”i CSS

Først får du tilgang til “”Element som har en klasse”.Bildeholder”. Bruk deretter følgende CSS -egenskaper:

.bildeholder
Posisjon: relativ;
Høyde: 100px;
Bredde: 200px;
Margin: Auto;

Detaljene om ovennevnte egenskaper er beskrevet nedenfor:

• “posisjon”Er satt som“slektning”For å spesifisere et elements opprinnelige posisjon som forblir i strømmen av dokumentet, akkurat som den statiske verdien.
• Deretter, "høyde”Brukes til å definere elementhøyden.
• “bredde”Eiendom spesifiserer størrelsen på elementet i bredden.
• “margin”Er satt som“bil”For å stille plassen automatisk rundt elementet.

Stilbilde i CSS

I dette trinnet får vi tilgang til de to klassene med navnet "Bildeholder”Og“IMG-Caption”Og bruk følgende CSS -egenskaper:

.Bildeholder .IMG-Caption
Posisjon: Absolutt;
tekst-align: sentrum;
Fontvekt: fet;
Bredde: 200px;
Høyde: 50px;
Venstre: 0px;
Farge: #F80909;
Bakgrunn: RGB (140, 166, 253);

Beskrivelsen av de ovennevnte egenskapene er som følger:

• “Tekstalign”Eiendom er satt som“senter”For å justere tekstposisjonen i sentrum.
• Neste, “Fontvekt”Tildeles som“dristig”For å stille inn bildeteksten Font.
• Og så "farge”Eiendom brukes til å sette fargen på det tilgangede elementet.
• “bakgrunn”Eiendom setter fargen på elementbakgrunnen.
• Andre egenskaper, inkludert "posisjon”,“høyde”, Og“bredde”Brukes også til å bruke de respektive funksjonalitetene.

Produksjon

Vi har diskutert metodene for å skrive bildeteksten under et bilde.

Konklusjon

For å skrive en bildetekst under et bilde, kan brukere enten bruke "”Element eller et enkelt””Container. For å bruke “", først, legg til “”Element for å legge inn bildet i“”Element, deretter, bruk“ ”elementet og legg til en bildetekst mellom taggene. I den andre tilnærmingen kan brukere ganske enkelt bruke "”Element og bruke forskjellige CSS -egenskaper for å forskjønne bildeteksten. Dette innlegget har demonstrert metodene for å skrive bildeteksten under et bilde.