Lisää Web-kuvateksti, joka pysyy sen kuvassa

Lisää HTML-kuvatekstejä Web-kuviin 9 helppoa vaihetta

Kuvat lisäävät elämää verkkosivuihin ja vetävät katsojien huomiota. Kuvatekstit tarjoavat lisätietoa web-kuville, mutta niitä voi olla vaikea lisätä verkkosivuille ilman kehittyneitä HTML- ja CSS-taitoja. Tässä on luotettava tapa lisätä yksinkertainen, mutta houkutteleva kuva kuvasta, joka pysyy kuvassa aina, kun siirrät sen verkkosivulle.

9 Vaiheita HTML-kuvaesitykseen

Lisää kuvateksti kuvaksi ja siirrä ne yhteen missä haluat:

1. Lisää kuva verkkosivuusi.
2. Aseta verkkosivun HTML-muotoon div-tunniste kuvan ympärille:
3. Lisää tyylin attribuutti div-tunnisteeseen:
   style = "" >
4. Määritä divin leveys kuvan leveyteen, jonka leveys-tyyppinen ominaisuus :
   width: image width px; ">
5. Lisää tekstitystoiminnon div-tyyliin tekstityökalusta, joka on hieman pienempi kuin ympäröivä teksti:
   font-size: 80%; ">
6. Kuvatekijät näyttävät parhaiten, jos ne sijaitsevat kuvan alapuolella, joten lisäät teksti-align-ominaisuuden tyylimääritteeseen:
   text-align: center; "> < img src = "URL" alt = "vaihtoehtoinen teksti" width = "width" height = "height" />
7. Lopuksi lisätään hieman ylimääräistä tilaa kuvan ja kuvatekstin välille lisäämällä tyyli-attribuutti kuvaan padding-bottom style -ominaisuudella:
   style =" padding-bottom: 0.5em; " />

1. Lisää sitten tekstin otsikko suoraan kuvan alapuolelle:
   Tämä on minun kuvateksti

Lähetä verkkosivusi palvelimelle ja testaa se selaimessa.

Kuvausvihjeitä

• Leveydet : CSS-mittasuhteet voivat olla monessa eri mittauksessa, joten yleensä on oltava mittaustyyppi. Esimerkiksi: leveys: 100 px ; Kuitenkin HTML-kuvamitat ovat aina pikseleinä, joten mittaukset jätetään pois. width = "100"
• Jos teet leveyden div suuremmaksi kuin kuvan leveys, kuvateksti saattaa näkyä kuvan vieressä. Jos tämä on mitä haluat, lisää sitten
  -tunniste suoraan otsikon alle ja kuvamerkin jälkeen.