רקע CSS לעומת צבע רקע

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

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

בואו נתחיל!

נכס רקע CSS

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

צבע רקע
תמונת רקע
מיקום רקע
גודל רקע
רקע-חזרה
רקע-מקור
רקע קליפ
רקע-מצורף

תחביר

להלן התחביר של מאפיין הרקע:

רקע: מיקום/גודל תמונה צבעוני מצורף קליפ מקור

נעבור להסבר על כל המאפיינים הנ'ל בזה אחר זה.

מאפיין צבע רקע CSS

משתמש ב ' צבע רקע ' מאפיין, אתה יכול להגדיר את צבע הרקע. הצבע יופיע מאחורי רכיבי ה-HTML.

תחביר

התחביר של מאפיין צבע רקע הוא:

צבע רקע : צֶבַע

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

דוגמא

ראשית, בקובץ HTML, ניצור קונטיינר באמצעות התג

ולאחר מכן נוסיף כותרת ופסקה.

HTML

< div >

< h1 > לינוקס רמז < / h1 >

< ע > ברוך הבא לאתר שלנו < / ע >

< / div >

ב-CSS, נתאים את גובה ה-div כ' 100% ' כדי לגרום לזה להופיע על כל העמוד ובגודל הגופן של הטקסט כ' xx-גדול '. לאחר מכן, הגדר את צבע הרקע כ' אקווה '.

CSS

div {

גוֹבַה : 100% ;

גודל גופן : xx-גדול ;

צבע רקע : אקווה ;

}

בתמונה המצורפת למטה, אתה יכול לראות שצבע הרקע מוחל:

נכס רקע-תמונת CSS

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

תחביר

התחביר של המאפיין רקע-תמונת הוא:

רקע-תמונה: url()

כאן, תן את הנתיב של התמונה שאתה רוצה להגדיר כרקע כטיעון ל' url() '.

דוגמא

בהמשך לדוגמא הקודמת, הוסף תמונת רקע ב' div ' מעמד. נוסיף את כתובת האתר של התמונה בתור ' url(img.jpg) ”:

div {

...

תמונת רקע : כתובת אתר ( img.jpg ) ;

}

הפלט שסופק להלן מציין שתמונת הרקע נוספה בהצלחה:

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

מאפיין חוזר על רקע CSS

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

תחביר

התחביר של המאפיין רקע-חזרה הוא:

רקע-חזרה : חזור | חזרה-x | חוזר-י | ללא חזרה

התיאור של הערכים המוצהרים של מאפיין רקע-חזרה ניתן להלן:

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

דוגמא

כאן, נגדיר את הערך של המאפיין רקע-חזרה כ' ללא חזרה ”:

div {

...

רקע-חזרה : ללא חזרה ;

}

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

נכס CSS רקע-מיקום

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

תחביר

התחביר של המאפיין רקע-מיקום הוא:

מיקום רקע : ערך

במקום ' ערך ', אתה יכול לציין את מיקום התמונה.

דוגמא

כאן, נגדיר את מיקום הרקע כ' מֶרְכָּז ”:

div {

...

מיקום רקע : מֶרְכָּז ;

}

בפלט למטה, התמונה מופיעה במרכז העמוד:

נכס בגודל רקע CSS

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

תחביר

רקע לגודל יש את התחביר הבא:

גודל רקע : אורך|כריכה

להלן התיאור של הערכים של המאפיין בגודל רקע:

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

דוגמא

נגדיר את גודל הרקע כ' 100% 'גובה ו' 80% רוחב:

div {

...

גודל רקע : 100% 80% ;

}

אתה יכול לראות שגודל התמונה השתנה על סמך המידות שצוינו:

נכס CSS רקע מקור

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

תחביר

התחביר של המאפיין רקע-מקור הוא:

רקע-מקור : ריפוד-קופסה| תיבת גבול | תיבת תוכן

הערכים של המאפיין רקע-מקור מתוארים להלן:

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

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

דוגמא

ראשית, צור גבול סביב המיכל. כאן, נמשיך בדוגמה הקודמת ונקבע את ערך הריפוד כ' 10 פיקסלים '. לאחר מכן, כוונן את רוחב הגבול כ' 15 פיקסלים ', סגנון כ' רֶכֶס ', וצבע כ' rgb(1, 68, 68) '. בסופו של דבר, נקצה את הערך של מאפיין מקור רקע בתור ' תיבת תוכן ”:

div {

...

ריפוד : 10 פיקסלים ;

גבול : 15 פיקסלים רֶכֶס rgb ( 1 , 68 , 68 ) ;

רקע-מקור : תיבת תוכן ;

}

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

CSS רקע קליפ נכס

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

תחביר

התחביר של המאפיין רקע-קליפ הוא:

רקע-מקור : תיבת גבול | ריפוד-קופסה | תיבת תוכן

הערכים של המאפיין רקע-מקור מתוארים להלן:

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

דוגמא

נמשיך בדוגמה הקודמת ונשנה את הערך של סגנון הגבול ל' מְנוּקָד כדי להבין את המאפיין רקע-קליפ. לאחר מכן, נגדיר את הערך של מאפיין רקע קליפ כ' תיבת ריפוד ”:

div {

...

רקע קליפ : תיבת ריפוד ;

}

הפלט מסמל שצבע הרקע הלבן מופיע כאשר קצה הגבול הסתיים:

נכס CSS רקע מצורף

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

תחביר

התחביר של המאפיין רקע מצורף הוא:

רקע-מצורף : ערך

אתה יכול להגדיר את הערך של קובץ מצורף רקע כ' תוקן ' כדי לתקן את תמונת הרקע או ' גְלִילָה ' כדי לאפשר לתמונה לגלול עם הדף.

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

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

לשם כך, אנו מגדירים את הערך של המאפיין רקע-מצורף כ' תוקן ”:

div {

...

רקע-מצורף : תוקן ;

}

הנה התוצאה המדגימה שהתמונה תוקנה:

כעת, פנה אל ההשוואה בין מאפייני רקע לצבע הרקע.