אתר קינון: כיצד להפוך את תמונת רקע html

מעצבי אינטרנט טירון רבים, רק כדי להתעמק מהות היצירה של אתרים, לעתים קרובות תוהה איך לעשות תמונת רקע html. ואם חלק מהם יכול להתמודד עם בעיה זו, היא עדיין בעיה בעת מתיחה על כל רוחבו של התמונה על המסך. במקביל אני רוצה לראות את האתר מוצגים באופן זהה על כל הדפדפנים, ולכן צריך למלא את הדרישות של לדפדפנים. אתה יכול להגדיר את הרקע בשתי דרכים: באמצעות תגי HTML ו- CSS סגנונות. כל אחד לעצמו, בוחר את האפשרות הטובה ביותר. כמובן, סגנון CSS הוא הרבה יותר נוח, כי הקוד שלה מאוחסן בקובץ נפרד ואינו לקחת את רמקולים נוספים בתגי האתר הראשי, אבל קודם הבה נבחנו שיטה פשוטה להתקנת התמונה על הרקע של האתר.

תגי HTML בסיסיים כדי ליצור את הרקע

אז, אנחנו הולכים לשאלה איך לעשות את תמונת הרקע ב- HTML על המסך. כדי לחפש באתר יפה, אתה חייב להבין אחד פרט חשוב למדי: זה מספיק רק כדי לעשות רקע שיפוע או לצבוע אותו בצבע אחיד, אבל אם אתה צריך להכניס את תמונת הרקע, זה לא יהיה למתוח את רוחב המסך. הדימוי היה צורך במקור להרים או להפוך עיצוב משלך עם סיומת זו, שבה תוכל להציג דף באתר. רק כאשר תמונת הרקע מוכנה, לגרור אותו לתוך תיקייה בשם «תמונות». בחודש זה, נוכל לאחסן את כל התמונות שבשימוש, אנימציות קבצים גרפיים אחרים. תיקייה זו צריכה להיות ממוקמת בספריית השורש עם כל קבצי HTML שלך. עכשיו אתה יכול להמשיך הלאה אל הקוד. קיימות מספר אפשרויות עבור כתיבת קוד, שבאמצעותו ברקע ישנה את התמונה.

1. כתוב מאפיין tag.
2. דרך סגנון CSS בקוד HTML.
3. כתוב סגנונות CSS בקובץ נפרד.

כמו HTML כדי להפוך את תמונת הרקע, אתה מחליט, אבל אני רוצה לומר כמה מילים על איך זה יהיה אופטימלי ביותר. השיטה הראשונה היא על ידי כתיבה באמצעות מאפיין tag כבר זמן רב מיושן. האפשרות השנייה משמשת לעתים רחוקות מאוד, כי מסתבר שהרבה אותו הקוד. אפשרות שלישית היא נפוצה ביותר ויעילה. הנה דוגמאות של תגי HTML:

1. שיטת הרישום הראשונה באמצעות מאפיין tag (גוף) בקובץ index.htm. זה מאוחסן בצורה זו: (רקע גוף = "שם_תיקיה / Nazvanie_kartinki.rasshirenie") (/ גוף). כלומר, אם יש לנו תמונה עם כותרת «התמונה» והרחבה JPG, ואת התיקייה שאנחנו בשם «תמונות», אז כניסת HTML-הקוד תיראה כך: (רקע גוף = "images / picture.jpg") ... (/ גוף) .
2. השיטה השנייה כרוכה הקלטה בסגנון CSS, אבל זה כתוב באותו קובץ עם שם index.htm. (גוף style = "background: url ( 'תמונות ../ / picture.jpg')").
3. השיטה השלישית של ההקלטה נעשית בשני קבצים. המסמך עם תג index.htm שם (ראש) כתוב כזה קו: (ראש) (link rel = "stylesheet" type = "text / css" href = "http: // אתר / מאמר / 193,110 /% D0% 9F D1%% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ ראש). סגנון style.css בשם הקובץ כבר לכתוב: הגוף {background: url (תמונות / picture.jpg ")}.

כמו HTML כדי להפוך את תמונת הרקע, אנחנו מבינים. עכשיו אתה צריך להבין איך למתוח את התמונה לרוחב המסך כולו.

דרכים למתוח את תמונת הרקע לרוחב החלון

אנחנו מייצגים מסך שלנו בצורה של אחוז. מתברר כי הרוחב והאורך השלם של המסך יהיו 100% × 100%. אנחנו צריכים למתוח את התמונה לרוחב הזה. הוסף את שורת הקלטת קובץ התמונה style.css כי תהיה למתוח את התמונה על הרוחב ו אורכו של המסך. ככתוב בסגנון CSS? זה פשוט!

גוף

{

רקע: url (תמונות / picture.jpg ")

ברקע-size: 100%; / * פוסט זה מתאים עבור רוב הדפדפנים המודרניים * /

}

אז גילינו איך לעשות רקע תמונה ב- HTML על המסך. יש גם דרך רישומו בקובץ index.htm. למרות ששיטה זו ומיושנת, אבל למתחילים יש צורך לדעת ולהבין. תג (ראש) (סגנון) div {גודל הרקע: כיסוי; } (/ סגנון) (/ ראש), התקליט הזה אומר שאנחנו להקצות יחידה מיוחדת ברקע, אשר ימוקם לאורך כל הרוחב של החלון. שקלנו בשתי דרכים, איך לעשות אתר HTML תמונת רקע, כך שהתמונה נמתחה לרוחב כל המסך בכל הדפדפנים המודרניים.

איך לעשות רקע קבוע

אם תחליט להשתמש בתמונה כרקע של משאב האינטרנט בעתיד, אז אתה רק צריך לדעת איך לעשות את זה קבוע, כך שהוא לא נמתח באורך לא לקלקל את המראה האסתטי. כל שעליך לעשות הוא באמצעות קוד HTML לרשום תוספת קטנה. אתה צריך להגיש style.css להוסיף ביטוי לאחר הרקע: url (תמונות / picture.jpg ") קבוע; או במקום הוסיף לאחר הפסיק בשורה נפרדת - העמדה: קבוע. לפיכך, הטפט שלך יהיה קבוע. במהלך גלילת תוכן באתר, תוכל לראות טקסט קווים עבר, אבל ברקע נשאר במקום. אז למדת איך לעשות תמונת רקע html, בכמה דרכים.

עבודה עם טבלאות ב HTML

מפתחי אינטרנט מנוסים רבים, מתמודדים עם שולחנות בלוקים, לעתים קרובות לא מבינים איך לעשות שולחן רקע תמונת html. כמו כל HTML צוותי סגנונות CSS, שפת התכנות האינטרנט הוא פשוט למדי. וזה הפתרון לבעיה זו הוא לכתוב זוג שורות קוד. אתה כבר צריך לדעת כי כתיבה בטבלת שורות ועמודות, בהתאמה, כפי שמצוין על ידי התגים (TR) ו (TD). כדי להפוך את הרקע של שולחן בצורת תמונה, יש צורך להוסיף תג (טבלה), (TR) או (TD) ביטוי פשוט בהתייחס תמונת ייחוס: הרקע = תמונות URL. למען הסר ספק, אנחנו נותנים כמה דוגמאות.

טבלה עם תמונה במקום ברקע: דוגמאות HTML

צייר טבלה 2x3 ולהפוך אותו את תמונת הרקע מאוחסן בתיקייה "תמונות": (רקע שולחן = "images / picture.jpg") (TR) (TD) 1 (/ TD) (TD) 2 (/ TD) (TD) 3) (/ TD) (/ TR) (TR) (TD) 4 (/ TD) (TD) 5 (/ TD) (TD) 6 (/ TD) (/ TR) (/ שולחן). אז השולחן שלנו יצויר ברקע של התמונה.

עכשיו לצייר באותם גדלי הצלחת של 2x3, אבל להוסיף תמונה בעמודות הממוספרות 1, 4, 5 ו -6 (טבלה) (TR) (רקע TD = "images / picture.jpg") 1 (/ TD) (TD) 2 (/ TD) (TD) 3 (/ TD) (/ TR) (TR) (רקע TD = "images / picture.jpg") 4 (/ TD) (רקע TD = "images / picture.jpg") 5 ( / TD) (רקע TD = "images / picture.jpg") 6 (/ TD) (/ TR) (/ שולחן). לאחר הצפייה אנו יכולים לראות כי הרקע מופיע רק באותם תאים שבהם אנו רשומים, ולא השולחן כולו.

אתר תאימות דפדפנים

יש דבר כזה כמשאב אינטרנט תאימות לדפדפנים. המשמעות היא שהאתר שלך מוצג היטב באותה מידה בסוגים שונים וגרסאות של הדפדפנים. זה צריך להיות קוד HTML סגנונות CSS כדי להתאים דפדפנים הכרחיים. יתר על כן, בעידן המודרני של טלפונים חכמים, מפתחי אינטרנט רבים מנסים ליצור אתרים המותאמים לנייד גרסה ומבט מחשב.