תוֹכֶן

• לדרוך
• שיטה 1 מתוך 4: הגדרת צבע רקע אחיד
• שיטה 2 מתוך 4: שימוש בתמונה כרקע
• שיטה 3 מתוך 4: צור רקע שיפוע
• שיטה 4 מתוך 4: הגדר אנימציה צבעונית כטפט

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

לדרוך

שיטה 1 מתוך 4: הגדרת צבע רקע אחיד

1. פתח את קובץ ה- HTML שלך בעורך הטקסט המועדף עליך. החל מ- HTML5, תכונת ה- HTML bgcolor> כבר אינה נתמכת. יש להגדיר את צבע הרקע, כמו כל היבטי הסגנון האחרים של הדף שלך, באמצעות CSS.
2. תוסיף את ה סגנון> / סגנון> מתייג את המסמך שלך. כל נתוני הסגנון של הדף שלך (כולל צבע הרקע) צריכים להיות מקודדים בתוך התגים האלה. יש לך את ה סגנון> תגים שכבר צוינו, אז אתה יכול פשוט לגלול לחלק זה של הקובץ.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. הקלד את אלמנט ה"גוף "בתוך ה- סגנון> / סגנון> תגים. כל מה שתשנה לאלמנט "body" ב- CSS ישפיע על כל הדף.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. הוסף את המאפיין "צבע רקע" לרכיב "גוף". בהקשר זה רק איות אחד של "צבע" יעבוד (לא: צבע).

   ! DOCTYPE html> html> head> style> body {background-color:} / style> / head> body> / body> / html>

5. הצב את צבע הרקע הרצוי מאחורי "צבע רקע". כעת תוכל לציין את שם הצבע (ירוק, כָּחוֹל, עורךוכו '), השתמש בקודי הקסדצימלי (hex) (למשל. #000000 לשחור, # ff0000 עבור אדום וכו ') או על ידי הקלדת ערך RGB עבור הצבע (כגון rgb (255,255,0) לצהוב). להלן דוגמה עם קודים הקסדקסימליים, מה שהופך את הרקע לזה של הבאנר wikiHow:

   ! DOCTYPE html> html> head> style> body {רקע-צבע: # 93B874; } / style> / head> body> / body> / html>

   • לבן: #FFFFFF
   • ורוד בהיר: # FFCCE6
   • סיינה שרופה: #993300
   • אינדיגו - # 4B0082
   • סגול - # EE82EE
   • בדוק את w3schools.com בורר הצבעים HTML כדי למצוא את קודי ה- hex של כל צבע שתרצה.
6. השתמש ב"צבע רקע "כדי להחיל צבעי רקע על אלמנטים אחרים. בדיוק כמו שאתה מגדיר את אלמנט הגוף, אתה יכול להשתמש בצבע רקע כדי להגדיר את הרקע של אלמנטים אחרים. פשוט מקם את האלמנטים האלה בתוך סגנון> / סגנון> עם המאפיין צבע-רקע.

   ! DOCTYPE html> html> head> style> body {רקע-צבע: # 93B874; } h1 {צבע רקע: כתום; } p {רקע-צבע: rgb (255,0,0); } / style> / head> body> h1> כותרת זו מקבלת רקע כתום / h1> p> פסקה זו מקבלת רקע אדום / p> / body> / html>

שיטה 2 מתוך 4: שימוש בתמונה כרקע

1. פתח את קובץ ה- HTML בעורך טקסט. אנשים רבים מעדיפים להשתמש בתמונה כרקע לאתר שלהם. בעזרת זה תוכלו להגדיר תבנית, מרקם, תמונה או כל תמונה אחרת כרקע. מ- HTML5, יש להגדיר את כל הרקעים עם CSS (גליונות סגנון מדורגים) בתוך ה- סגנון> / סגנון> תגים.
2. תוסיף את ה סגנון> / סגנון> תגים לקובץ ה- HTML שלך. יש לציין את כל נתוני הסגנון של הדף שלך (כולל צבע הרקע) בתוך התגים האלה. כבר יש לך סגנון> להגדיר תגים, גלול לחלק זה של הקובץ.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. הקלד את אלמנט ה"גוף "בתוך ה- סגנון> / סגנון> תגים. כל מה שתשנה לאלמנט "body" ב- CSS ישפיע על כל הדף.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. הוסף את המאפיין "תמונת רקע" לאלמנט "גוף". בעת הוספת נכס זה תזדקק לשם הקובץ של התמונה שלך. ודא שהתמונה נשמרת באותה תיקיה כמו קובץ ה- HTML (או הוסף את הנתיב המלא לקובץ לשרת האינטרנט שלך).

   ! DOCTYPE html> html> head> style> body {background-image: url ("imagename.png"); צבע רקע: # 93B874; } / style> / head> body> / body> / html>

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

   ! DOCTYPE html> html> head> style> body {background-image: url ("image1.png"), url ("image2.gif"); צבע רקע: # 93B874; } / style> / head> body> / body> / html>

   • התמונה הראשונה נמצאת למעלה. התמונה השנייה היא מתחת לראשונה.

שיטה 3 מתוך 4: צור רקע שיפוע

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

   רקע: שיפוע ליניארי (כיוון / זווית, צבע 1, צבע 2, צבע 3 וכו ');

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

   ! DOCTYPE html> html> head> style> html {min-height: 100%; / * זה נדרש בכדי להבטיח שהמדרוג משתרע על כל גוף הדף * /} {רקע: -webkit-linear-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / רקע: -o- לינארי-שיפוע (# 93B874, # C9DCB9); / * אופרה 11.1+ * / רקע: -moz-linear-gradient (# 93B874, # C9DCB9); / * Firefox 3.6+ * / רקע: שיפוע לינארי (# 93B874, # C9DCB9); / * תחביר ברירת מחדל (חייב להיות אחרון) * / צבע רקע: # 93B874; / * מומלץ להגדיר צבע רקע, למקרה שהמעבר לא נטען * /} / style> / head> body> / body> / html>

4. צור שיפוע עם כיוון. הוספת כיוון לשיפוע מאפשרת לך להתאים את אופן שינוי הצבע. שים לב כי דפדפנים שונים יפרשו הוראות שונות. כולם יציגו את אותו שיפוע הצבע.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; } גוף {רקע: -webkit-linear-gradient (שמאל, # 93B874, # C9DCB9); / * משמאל לימין * / רקע: -o- לינארי-שיפוע (מימין, # 93B874, # C9DCB9); / * סוף בצד ימין * / רקע: -moz-linear-gradient (מימין, # 93B874, # C9DCB9); / * סוף מימין * / רקע: שיפוע לינארי (ימינה, # 93B874, # C9DCB9); / * עובר לצד ימין * / צבע רקע: # 93B874; / * מומלץ להגדיר צבע רקע, למקרה שהמעבר לא נטען * /} / style> / head> body> / body> / html>

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

     רקע: שיפוע ליניארי (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • הוסף שקיפות לצבעים. בעזרת זה תוכלו לדעוך את הצבעים. השתמש באותו צבע כדי לדהות מהצבע לשום דבר. אתה תאהב את הפונקציה rgba () חייב להשתמש כדי לציין את הצבע. הערך הסופי קובע את מידת השקיפות: 0 לאטום ו 1 לשקוף.

     רקע: שיפוע ליניארי (מימין, rgba (147,184,116.0), rgba (147,184,116.1));

שיטה 4 מתוך 4: הגדר אנימציה צבעונית כטפט

1. נווט אל סגנון> בקוד ה- HTML שלך. אם אתה מוצא צבע רקע אחיד אך לא, התנסה בשינוי רקע צבע. מ- HTML 5, יש להגדיר צבעי רקע באמצעות CSS (גליונות סגנון מדורגים). אם מעולם לא הגדרת צבע רקע עם CSS, קרא את הסעיף להגדרת צבע רקע אחיד לפני שתנסה שיטה זו.
2. הוסף את הנכס אנימציה לאלמנט ה"גוף ". יהיה עליכם להוסיף 2 מאפיינים שונים, מכיוון שכל דפדפן דורש קוד שונה.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite; אנימציה: שינוי צבעוני אינסופי; } / style> / head> body> / body> / html>

   • -Webkit- אנימציה הנכס נדרש לדפדפנים מבוססי Chrome (Chrome, Opera, Safari). אנימציה הוא הסטנדרט לכל שאר הדפדפנים.
   • שינוי צבע הוא מה שמכונה בדוגמא זו האנימציה.
   • שנות ה -60 הוא משך הזמן (60 שניות) של האנימציה / המעבר. הקפד להגדיר זאת הן עבור ערכת האינטרנט והן עבור תחביר ברירת המחדל.
   • אֵינְסוֹף מציין שהאנימציה צריכה לחזור ללא הגבלת זמן. אם אתה מעדיף לולאה את הצבעים ואז לעצור בצבע האחרון, אתה יכול להשמיט את החלק הזה.
3. הוסף צבעים לאנימציה שלך. כעת תשתמש בכלל @keyframes כדי להגדיר את צבעי הרקע שיעברו, וכן כמה זמן ניתן לראות כל צבע בדף. שוב תצטרך להוסיף מספר קידודים לדפדפנים השונים.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite; אנימציה: שינוי צבעוני אינסופי; } @ -webkit-keyframes colorchange {0% {רקע: # 33FFF3;} 25% {רקע: # 78281F;} 50% {רקע: # 117A65;} 75% {רקע: # DC7633;} 100% {רקע: # 9B59B6;}} @ keyframes colorchange {0% {רקע: # 33FFF3;} 25% {רקע: # 78281F;} 50% {רקע: # 117A65;} 75% {רקע: # DC7633;} 100% {רקע: # 9B59B6;}} / style> / head> body> / body> / html>

   • שים לב ששתי השורות (@ -webkit-keyframes ו @keyframes בעלי אותם ערכים עבור צבעי הרקע והאחוזים. עליו להישאר אחיד כך שהחוויה תישאר זהה לכל הדפדפנים.
   • האחוזים (0%, 25%וכו ') מייצגים את משך הזמן הכולל של האנימציה (שנות ה -60). כאשר העמוד נטען, ברקע יוגדר הצבע 0% ו (# 33FFF3). כאשר 25% או 60 שניות מהאנימציה הושמעו, הרקע יעבור ל # 78281F, וכולי.
   • ניתן להתאים את משך הצבעים לפי הצורך.