טיפים שימושיים

כיצד ליצור תמונת רקע במהירות ובקלות באמצעות HTML

Pin
Send
Share
Send
Send


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

בחירת תמונה

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

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

אם כי, יש לך הזדמנות לעקוף את המערכת. לשם כך, השתמש בפוטושופ ושנה את גודל התמונה לרוחב המסך (1280x720). אם כי במקרה זה, בעת הגלילה למטה, התמונה תחליף תמונה אחרת.

אפשרות טובה בהרבה אם אתה לא רוצה להשתמש ב- css היא להשתמש במרקמים חלקים. הם לא רואים שום מפרקים. הם כמו טפטים או אריחים מודרניים בעיצוב. האחד מחליף את השני ולא ניתן לראות שום מפרקים.

אם אתה מעוניין בתמונות בחינם והיעדר השלכות משפטיות על השימוש בהן, אז אני ממליץ לחפש באתר Pixabay.com.

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

כך שתוכלו לעבוד בפנקס רשימות, אני מעדיף את NotePad ++. הרבה יותר נוח לעבוד בו: הקוד מתווסף עבורך, התגים מודגשים. התוכנית בחינם ומשקלה כ- 3 מגה בייט. ממליץ בחום, במיוחד אם אתה מתחיל.

אז בתג גוף עליך להוסיף תכונה רקע וציינו קישור לתמונה, ממנה צולמה התמונה. כך נראה התוכנית.

אתה יכול פשוט לפתוח את פנקס הרשימות ולהעתיק את הקוד הזה. במירכאות, הכנס קישור לתמונה שאתה אוהב.

תמונה כרקע עמוד - HTML

ראשית, יש לקחת בחשבון את אופן הגדרת תמונת הרקע באתר באמצעות התכונה רקע תגית גוף:

כמו בדוגמה שלמעלה, בנוסף לתמונה, מומלץ לציין את צבע הרקע (הוא יוצג באתר כאשר העמוד נטען), שישולב עם תמונת הרקע וייצור ניגודיות לטקסט באתר. לדוגמה, אם אתה משתמש בצבע הלבן של הטקסט באתר, עליך לציין צבע רקע כהה ולהגדיר תמונת רקע כהה. במקרה זה, הטקסט יהיה קל לקריאה.

הערה: מומלץ להגדיר את תמונת הרקע וצבע הרקע לא משתמשים ב- HTML, אלא באמצעות CSS. במקרה זה, הקוד יהיה תקף ונכון יותר.

תמונה כרקע עמוד - CSS

ב- CSS, ניתן להגדיר את צבע הרקע ואת תמונת הרקע עם מאפיין אחד. רקע:

כאן באמצעות הנכס קובץ מצורף רקע רקע העמוד קבוע, והשימוש בנכס חזור על רקע נקבעת חזרה אופקית של התמונה. אבל כדאי לקחת בחשבון שתמונת הרקע צריכה "לתפור" לאורך הקצוות היטב.

אם ברצונך למתוח את תמונת הרקע לגודל המלא של חלון הדפדפן, השתמש במאפיין גודל רקע: 100%,

בונה האתר Nubex, עבור כל אתר אתה יכול להשתמש בתמונה גדולה כרקע ולתקן אותה.

רקע לאתר

קורה שעיצוב האתר הישן כבר משעמם. ואני רוצה משהו חדש וטעים. והעיצוב החדש יהיה כזה אם תבשלו אותו בעצמכם.

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

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

יסודות רקע של HTML

אתה יכול להשתמש בכמה אלמנטים כרקע:

  • צבע
  • תמונת רקע
  • תמונת מרקם.

נעסוק בכל אחד מהם ביתר פירוט.

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

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

לכן, כדי להגדיר את הרקע לאתר ה- HTML עדיף להשתמש בתבנית ההקסדצימלית או RGB.

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

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

נניח שאנחנו מפתחים אתר העוסק בשירה, ואנחנו צריכים להשתמש בתמונת פגאסוס כמצע. הסוס המכונף יגלם את חופש מחשבתו היצירתית של המשורר!

  • repeat-x - חזור על תמונת הרקע אופקית,
  • חזור על y - אנכית,
  • חזור - בשני הצירים,
  • אין לחזור - חזרה אסורה.

מבין האפשרויות המפורטות, אנו מעוניינים בכך. לפני שינוי הרקע של האתר, אנו משתמשים בו בקוד שלנו:

  • מילת מפתח (למעלה, תחתון, מרכז, שמאל, ימין),
  • אחוז - הספירה לאחור מתחילה מהפינה השמאלית העליונה,
  • ביחידות מדידה (פיקסלים).

אנו משתמשים באופציית הריכוז הפשוטה ביותר:

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


  • גלול
  • קבוע.

אנו זקוקים לערך האחרון. כעת הקוד של הדוגמה שלנו ייראה כך: [/ HTML]

רקע אתר מרקמי

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

סכום זה אינו משפיע על מהירות טעינת העמודים של הדפדפן עם חיבור אינטרנט מהיר. אבל מה עם האינטרנט הנייד, השימוש בהורדת כמה "מטרים" ייקח הרבה זמן?

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

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

לשם הבהרה, הוספנו טקסט וקבענו את צבעו באמצעות מאפיין הצבע. הנה מה שקרה:

כלי CSS

כל המאפיינים שתוארו לעיל חלים גם על גליונות סגנון מדורגים. צור את רקע האתר css על ידי כתב את הקוד לאחת הדוגמאות הקודמות שלנו:

התוצאה תהיה דומה.

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

Pin
Send
Share
Send
Send