פוסט זה מסביר על כתיבת כיתוב מתחת לתמונה.
איך כותבים כיתוב מתחת לתמונה?
כדי לכתוב כיתוב מתחת לתמונה, נספק שיטות שונות המוזכרות להלן:
- שיטה 1: כיצד להוסיף כיתוב תמונה באמצעות HTML '
'אלמנט? - שיטה 2: כיצד להוסיף כיתוב תמונה באמצעות ' 'אלמנט?
שיטה 1: כיצד להוסיף כיתוב תמונה באמצעות רכיב HTML '
'? כדי להוסיף כיתוב תמונה, עברו על ההוראות הבאות:
- ראשית, הוסף את ' <דמות> ' אלמנט, המשמש לייצוג תוכן עצמאי, אולי עם כיתוב אופציונלי.
- לאחר מכן, הכנס '
' תג בתוך הפסקה ' 'תג. הוסף את התמונה על ידי שימוש ב' src ' תכונה. ה ' הכל ' מאפיין מציג את התוכן שנוסף אם התמונה לא הוצגה מסיבה כלשהי.
- הגדר את רוחב התמונה כ' 200 פיקסלים '.
- אז ה '
תג ' משמש להוספת הכיתוב לתמונה. יתר על כן, הוסף את הכיתוב בין התגים ' ':
= 'TSL.png' הכל = 'יוצרי תוכן TSL' רוֹחַב = '200' >
<כיתוב תמונה > יוצרי תוכן TSL >
>אתה יכול לראות שהתמונה עם הכיתוב שצוין הוצגה:
כעת, עבור אל השיטה השנייה להוספת הכיתוב באמצעות CSS.
שיטה 2: כיצד להוסיף כיתוב תמונה באמצעות אלמנט '
'?כדי להוסיף את כיתוב התמונה באמצעות '
', נסה את ההוראות הנתונות:
- ליצור ' ' מיכל והוסף מאפיין class עם השם ' בעל תמונה '.
- הוסף תג כותרת ' ' להכנסת הכותרת וסגנון הכותרת לפי בחירתך.
- הוסף רכיב '
' נוסף והכנס ''תייג יחד עם ' src ', ' הכל ' ו' רוֹחַב ' מאפיינים בין מיכל ה-div.
- הוסף '
' שלישי עם שם הכיתה ' img-caption '. לאחר מכן, ספק את הכיתוב בין התגים ''. יתר על כן, ה'
' אלמנט משמש להוספת מעבר שורה אחד:= 'מחזיק תמונה' >
= 'color:rgb(95, 31, 245)' > תמונת HTML >
= 'TSL.png' הכל = 'יוצרי תוכן TSL' רוֹחַב = '200' >
= 'אימג-כיתוב' >
>
>ניתן לראות כי הכיתוב לתמונה נוסף בהצלחה:
כעת, בואו נעבור לקטע CSS להחלת המאפיינים.
סגנון '.image-holder' ב-CSS
ראשית, גש ל'
'רכיב בעל מחלקה' מחזיק תמונה '. לאחר מכן, החל את מאפייני ה-CSS הבאים: מחזיק תמונה {
עמדה : קרוב משפחה ;
גוֹבַה : 100 פיקסלים ;
רוֹחַב : 200 פיקסלים ;
שולים : אוטומטי ;
}הפרטים של המאפיינים שהוזכרו לעיל מתוארים להלן:
- ה ' עמדה ' מוגדר כ' קרוב משפחה ' כדי לציין את המיקום המקורי של אלמנט שנשאר בזרימת המסמך, בדיוק כמו הערך הסטטי.
- לאחר מכן, ' גוֹבַה ' משמש להגדרת גובה האלמנט.
- ה ' רוֹחַב ' מאפיין מציין את גודל האלמנט ברוחב.
- ה ' שולים ' מוגדר כ' אוטומטי ' כדי להגדיר את הרווח באופן אוטומטי סביב האלמנט.
כיתוב סגנון ב-CSS
בשלב זה, נגיע לשתי המחלקות עם השם ' בעל תמונה ' ו' img-caption ' והחל את מאפייני ה-CSS הבאים:
מחזיק תמונה .img-caption {
עמדה : מוּחלָט ;
יישור טקסט : מֶרְכָּז ;
משקל גופן : נוֹעָז ;
רוֹחַב : 200 פיקסלים ;
גוֹבַה : 50 פיקסלים ;
שמאלה : 0px ;
צֶבַע : #f80909 ;
רקע כללי : rgb ( 140 , 166 , 253 ) ;
}התיאור של הנכסים הנ'ל הוא כדלקמן:
- ה ' יישור טקסט ' המאפיין מוגדר כ' מֶרְכָּז ' ליישור מיקום הטקסט במרכז.
- הבא, ' משקל גופן ' מוקצה כ' נוֹעָז ' כדי להגדיר את גופן כיתוב התמונה.
- אז ה ' צֶבַע 'מאפיין משמש להגדרת הצבע של הרכיב הנגיש.
- ה ' רקע כללי ' מאפיין מגדיר את צבע הרקע של האלמנט.
- נכסים אחרים, כולל ' עמדה ', ' גוֹבַה ', ו' רוֹחַב ' משמשים גם ליישום הפונקציונליות המתאימות.
תְפוּקָה
דנו בשיטות לכתיבת הכיתוב מתחת לתמונה.
סיכום
כדי לכתוב כיתוב מתחת לתמונה, משתמשים יכולים להשתמש ב-'
' אלמנט או פשוט ' 'מיכל. כדי להשתמש ב-'', תחילה, הוסף את ' ' רכיב כדי להטמיע את התמונה בתוך ' <דמות> ', אם כן, השתמש באלמנט '
' והוסף כיתוב בין התגים שלו. בגישה השנייה, משתמשים יכולים פשוט להשתמש ב' ' רכיב ולהחיל מאפייני CSS שונים כדי לייפות את הכיתוב. פוסט זה הדגים את השיטות לכתיבת הכיתוב מתחת לתמונה.