Ez a bejegyzés elmagyarázza, hogyan kell feliratot írni egy kép alá.
Hogyan írjunk feliratot egy kép alá?
Ha feliratot szeretne írni egy kép alá, az alábbiakban felsorolt módszereket kínáljuk:
- 1. módszer: Képaláírás hozzáadása HTML használatával
” Elem? - 2. módszer: Képaláírás hozzáadása a „ ” Elem?
1. módszer: Hogyan adjunk hozzá képaláírást HTML „
” elem használatával? Képaláírás hozzáadásához kövesse az alábbi utasításokat:
- Először adja hozzá a „ <ábra> ” elem, amely önálló tartalom megjelenítésére szolgál, esetleg opcionális felirattal.
- Ezután szúrjon be egy „
' címke a bekezdésben ' ” címke. Adja hozzá a képet a ' src ' tulajdonság. Az ' minden ” tulajdonság mutatja a hozzáadott tartalmat, ha a kép valamilyen okból nem jelent meg.
- Állítsa be a kép szélességét ' 200 képpont ”.
- Aztán a '
” címke a kép feliratának hozzáadására szolgál. Ezenkívül adja hozzá a feliratot a „ ” címkék közé:
= 'TSL.png' minden = 'TSL tartalomkészítők' szélesség = '200' >
<ábrafelirat > TSL tartalomkészítők >
>Láthatja, hogy a megadott feliratú kép megjelent:
Most lépjen a második módszer felé a felirat CSS használatával történő hozzáadásához.
2. módszer: Hogyan adjunk hozzá képaláírást a „
” elem használatával?A képaláírás hozzáadásához a „
” elemet, próbálja ki a megadott utasításokat:
- Hozzon létre egy ' ” tárolót, és adjunk hozzá egy osztályattribútumot a következővel: képtartó ”.
- Címsor hozzáadása ' ” a címsor beszúrásához és a fejléc stílusának megfelelő stílusához.
- Adjon hozzá egy másik „
” elemet, és szúrjon be egy „' címke és ' src ”, „ minden ” és „ szélesség ” attribútumokat a div tároló között.
- Adjon hozzá egy harmadik „
”-t a „ osztálynévvel img-felirat ”. Ezután adja meg a feliratot a „” címkék közé. Ráadásul a „
” elem egy sortörés hozzáadására szolgál:= 'képtartó' >
= 'szín:rgb(95, 31, 245)' > HTML kép >
= 'TSL.png' minden = 'TSL tartalomkészítők' szélesség = '200' >
= 'img-caption' >
>
>Megfigyelhető, hogy a kép felirata sikeresen hozzáadva:
Most térjünk át a tulajdonságok alkalmazásának CSS szakaszára.
Stílus „.image-holder” a CSS-ben
Először nyissa meg a „
'elemnek van osztálya' .képtartó ”. Ezután alkalmazza a következő CSS-tulajdonságokat: .képtartó {
pozíció : relatív ;
magasság : 100 képpont ;
szélesség : 200 képpont ;
árrés : auto ;
}A fent említett tulajdonságok részleteit az alábbiakban ismertetjük:
- Az ' pozíció ' a következőre van állítva: ' relatív ” egy elem eredeti pozíciójának megadásához, amely a statikus értékhez hasonlóan a dokumentum folyamatában marad.
- Azután, ' magasság ” az elem magasságának meghatározására szolgál.
- Az ' szélesség ” tulajdonság határozza meg az elem méretét szélességben.
- Az ' árrés ' a következőre van állítva: ' auto ” az elem körüli tér automatikus beállításához.
Stílusfelirat a CSS-ben
Ebben a lépésben elérjük a két osztályt a következő néven: képtartó ” és „ img-felirat ” és alkalmazza a következő CSS-tulajdonságokat:
.képtartó .img-caption {
pozíció : abszolút ;
szöveg igazítás : központ ;
font-weight : bátor ;
szélesség : 200 képpont ;
magasság : 50 képpont ;
bal : 0px ;
szín : #f80909 ;
háttér : rgb ( 140 , 166 , 253 ) ;
}A fent említett tulajdonságok leírása a következő:
- Az ' szöveg igazítás ' tulajdonság a következőre van állítva: ' központ ” a szöveg pozíciójának középre igazításához.
- Következő, ' font-weight ' a következőként van kiosztva: ' bátor ” a képfelirat betűtípusának beállításához.
- Aztán a ' szín ” tulajdonság az elért elem színének beállítására szolgál.
- Az ' háttér ” tulajdonság beállítja az elem hátterének színét.
- Egyéb tulajdonságok, beleértve a ' pozíció ”, „ magasság ”, és „ szélesség ” is használhatók a megfelelő funkciók alkalmazására.
Kimenet
Megbeszéltük a kép alatti feliratírás módszereit.
Következtetés
Ha feliratot szeretne írni egy kép alá, a felhasználók használhatják a „
' elem vagy egy egyszerű ' ” konténer. A „használatához először adja hozzá a „ ' elem a kép beágyazásához a ' <ábra> ” elemet, majd használja a „
” elemet, és adjon hozzá egy feliratot a címkéi közé. A második megközelítésben a felhasználók egyszerűen használhatják a „ ” elemet, és alkalmazzon különböző CSS-tulajdonságokat a felirat szebbé tételéhez. Ez a bejegyzés bemutatta a kép alatti feliratírás módszereit.