Tämä viesti selittää kuvatekstin kirjoittamisen kuvan alle.
Kuinka kirjoittaa kuvateksti kuvan alle?
Voit kirjoittaa kuvatekstin kuvan alle käyttämällä alla mainittuja eri menetelmiä:
- Tapa 1: Kuvatekstien lisääminen HTML-koodilla
”Elementti? - Tapa 2: Kuvatekstin lisääminen ' ”Elementti?
Tapa 1: Kuvatekstin lisääminen HTML-elementillä '
'? Lisää kuvateksti seuraavien ohjeiden mukaan:
- Lisää ensin '
”-elementti, jota käytetään edustamaan itsenäistä sisältöä mahdollisesti valinnaisella kuvatekstillä. - Lisää seuraavaksi '
'-tunniste kappaleen sisällä' ' -tunniste. Lisää kuva käyttämällä ' src ”-attribuutti. ' kaikki ” -ominaisuus näyttää lisätyn sisällön, jos kuva ei jostain syystä näkynyt.
- Aseta kuvan leveydeksi ' 200 pikseliä ”.
- Sitten '
” -tunnistetta käytetään lisäämään kuvan kuvateksti. Lisää lisäksi kuvateksti -tunnisteiden väliin:
= 'TSL.png' kaikki = 'TSL-sisällöntekijät' leveys = '200' >
>Voit nähdä, että kuva määritetyllä kuvatekstillä on näytetty:
Siirry nyt toiseen menetelmään kuvatekstin lisäämiseksi CSS:n avulla.
Tapa 2: Kuvatekstin lisääminen
-elementillä?Voit lisätä kuvatekstin käyttämällä '
”-elementtiä, kokeile annettuja ohjeita:
- Luo ' ' säilö ja lisää luokan attribuutti nimellä ' kuvan haltija ”.
- Lisää otsikkotunniste ' ' otsikon lisäämiseen ja tyyliin valintasi mukaan.
- Lisää toinen '
'-elementti ja lisää ''-tunniste yhdessä ' src ”, “ kaikki ' ja ' leveys ”-attribuutteja div-säilön välissä.
- Lisää kolmas '
' luokan nimellä ' img-teksti ”. Lisää sitten kuvateksti-tunnisteiden väliin. Lisäksi '
”-elementtiä käytetään lisäämään yksi rivinvaihto:= 'kuvanhaltija' >
= 'väri:rgb(95, 31, 245)' > HTML-kuva >
= 'TSL.png' kaikki = 'TSL-sisällöntekijät' leveys = '200' >
= 'kuvan kuvateksti' >
>
>Voidaan havaita, että kuvan otsikko on lisätty onnistuneesti:
Siirrytään nyt CSS-osioon ominaisuuksien soveltamista varten.
Tyyli '.image-holder' CSS:ssä
Avaa ensin '
'elementti, jolla on luokka' .image-holder ”. Käytä sitten seuraavia CSS-ominaisuuksia: .image-holder {
asema : suhteellinen ;
korkeus : 100 pikseliä ;
leveys : 200 pikseliä ;
marginaali : auto ;
}Yllä mainittujen ominaisuuksien yksityiskohdat on kuvattu alla:
- ' asema ' on asetettu ' suhteellinen ” määrittääksesi elementin alkuperäisen sijainnin, joka pysyy dokumentin kulussa, aivan kuten staattinen arvo.
- Sitten, ' korkeus ” käytetään elementin korkeuden määrittämiseen.
- ' leveys ”-ominaisuus määrittää elementin koon leveydessä.
- ' marginaali ' on asetettu ' auto ” asettaaksesi tilan automaattisesti elementin ympärille.
Tyylikuvaus CSS:ssä
Tässä vaiheessa pääsemme kahteen luokkaan nimellä ' kuvan haltija ' ja ' img-teksti ' ja käytä seuraavia CSS-ominaisuuksia:
.image-holder .img-caption {
asema : ehdoton ;
tekstin tasaus : keskusta ;
fontin paino : lihavoitu ;
leveys : 200 pikseliä ;
korkeus : 50 pikseliä ;
vasemmalle : 0px ;
väri- : #f80909 ;
tausta : rgb ( 140 , 166 , 253 ) ;
}Edellä mainittujen ominaisuuksien kuvaus on seuraava:
- ' tekstin tasaus ' omaisuus on asetettu ' keskusta ' tekstin kohdistamiseksi keskelle.
- Seuraava, ' fontin paino ' on jaettu nimellä ' lihavoitu ” määrittääksesi kuvatekstifontin.
- Sitten ' väri- ” -ominaisuutta käytetään määritettäessä käytettävän elementin väriä.
- ' tausta ”-ominaisuus määrittää elementin taustan värin.
- Muita ominaisuuksia, mukaan lukien ' asema ”, “ korkeus ”, ja ” leveys ' käytetään myös vastaavien toimintojen soveltamiseen.
Lähtö
Olemme keskustelleet menetelmistä kuvatekstin kirjoittamiseen kuvan alle.
Johtopäätös
Voit kirjoittaa kuvatekstin kuvan alle käyttämällä joko '
'elementti tai yksinkertainen' ”kontti. Jos haluat käyttää '', lisää ensin ' ' -elementti upottaaksesi kuvan ''
' -elementti, käytä sitten ' ' -elementtiä ja lisää kuvateksti sen tunnisteiden väliin. Toisessa lähestymistavassa käyttäjät voivat yksinkertaisesti käyttää ' ” -elementtiä ja käytä erilaisia CSS-ominaisuuksia kuvatekstin kaunistamiseksi. Tämä viesti on osoittanut menetelmiä kuvatekstin kirjoittamiseen kuvan alle.
- Lisää ensin '