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

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

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





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



מדריך זה יכסה את כל מה שאתה צריך לדעת כיצד לשנות את צבע הרקע באמצעות CSS.





קבל הגדרה

בואו נדפק קצת עבודה מקדימה.

כיצד לשפר את איכות הצליל במחשב נייד חלונות 10

הערה : אני ממליץ להשתמש קוד Visual Studio עם ה הרחבת שרת חי כדי לצפות בשינויים בזמן אמת בעת עדכון ה- HTML ו- CSS.



  1. צור תיקייה לקבצי הפרויקט שלך.
  2. ליצור index.html קובץ שיאכלס את ה- HTML שלך. אתה יכול להשתמש בקוד פלטה, או פשוט להגדיר כמה , , ו תגים.
  3. ליצור styles.css קובץ עבור ה- CSS שלך.
  4. קשר את קובץ ה- CSS שלך ל- HTML על -ידי הצבה בתוך ה תגים.

עכשיו אתה מוכן להתחיל לערוך את ה- CSS.

קָשׁוּר: כיצד ליצור אתר Boilerplate



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

הדרך הפשוטה ביותר לשנות את צבע הרקע היא על ידי מיקוד ל- גוּף תָג. לאחר מכן, ערוך את צבע רקע תכונה. תוכל למצוא קודי צבע על ידי חיפוש ותוסף הדפדפן של Google Color Picker

body {
background-color: rgb(191, 214, 255);
}

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



ה צבע רקע הנכס מקבל צבעים בשש צורות שונות:

  • שֵׁם : lightskyblue; (לקירוב קרוב)
  • קוד hex : # bfd6ff;
  • rgb : rgb (191, 214, 255);
  • rgba : רגבה (191, 214, 255, 1); איפה ל הוא אלפא (אטימות)
  • HSL : hsl (218 °, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); איפה ל הוא אלפא (אטימות)

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

ליצור אלמנט ולתת לו מחלקה - במקרה זה, המחלקה היא לוּחַ . הגדר את שלו גוֹבַה ו רוֹחַב נכסים ב- CSS. בחר את האלמנט ב- CSS וצבע משם.

body {
background-color: rgb(191, 214, 255);
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.panel {
background: rgb(255, 148, 148);
height: 10rem;
width: 30%;
}
.muo-text {
font-size: 3em;
font-weight: bolder;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: absolute;
}

כאן תוכלו לראות את גוּף רקע כללי הנכס מעוצב ללא תלות ב- .לוּחַ רקע כללי תכונה.

נכס הרקע מקבל גם שיפועים:

body {
background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
}

כיצד לשנות את תמונת הרקע ב- CSS

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

ודא שהתמונה נמצאת באותה תיקייה של קובצי ה- HTML וה- CSS שלך. אחרת תצטרך להשתמש בנתיב הקובץ בתוך הסוגריים ולא רק בשם:

body {
background: url(leaves-and-trees.jpg)
}

וואו! נראה שהתמונה מוגדלת מדי. ניתן לתקן זאת באמצעות גודל רקע תכונה.

body {
background: url(leaves-and-trees.jpg);
background-size: cover;
}

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

body {
background: url(leaves-and-trees.jpg) top left / cover;
}

הנה לך! תמונת רקע בגודל מתאים בשורה אחת של CSS.

קרא עוד: כיצד להגדיר תמונת רקע ב- CSS

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

הגדל את משחק ה- CSS שלך עם צללית CSS

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

נסה לתת לקופסאות שלך דחיפה בעזרת CSS box-shadow. רכיבי ה- HTML שלך מעולם לא נראו טוב יותר!

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל אופן השימוש ב- CSS box-shadow: 13 טריקים ודוגמאות

ארגזים מעורפלים נראים משעממים. לשדרג אותם עם אפקט צללית CSS!

קרא הבא נושאים קשורים
  • תִכנוּת
  • בניית אתרים
  • עיצוב אתרים
  • CSS
על הסופר מרקוס מירס השלישי(26 מאמרים פורסמו)

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

עוד מאת מרקוס מירס השלישי

הירשם לניוזלטר שלנו

הצטרף לניוזלטר שלנו לקבלת טיפים, סקירות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!

לחצו כאן להרשמה