אחד הדברים הנפוצים ביותר שעליך לעשות כמפתח אתרים הוא לשנות את צבע הרקע של אלמנט HTML. אבל זה עשוי להיות מבלבל לעשות אם אינך מבין כיצד להשתמש background-colorבמאפיין CSS .
במאמר, אנו דנים
- ערך צבע הרקע המוגדר כברירת מחדל של אלמנט HTML
- כיצד לשנות את צבע הרקע של div, שהוא מרכיב נפוץ מאוד
- אילו חלקים ממודל תיבת CSS מושפעים
background-colorמהנכס, וכן - את הערכים השונים שמאפיין זה יכול לקחת.
צבע ברקע ברירת מחדל של אלמנט
צבע הרקע המוגדר כברירת מחדל של div הוא transparent. אז אם לא תציין את צבע הרקע של div, הוא יציג את זה של האלמנט האב שלו.
שינוי צבע הרקע של Div
בדוגמה זו נשנה את צבעי הרקע של המחלקות הבאות.
I love HTML I love CSS I love JavaScript ללא כל עיצוב, זה יתורגם לדברים הבאים מבחינה ויזואלית.
בואו לשנות את צבע הרקע של המחלקות על ידי הוספת סגנונות לשיעורים. תוכל לעקוב אחריו על ידי ניסיון בדוגמאות בקובץ HTML.
.div-1 { background-color: #EBEBEB; } .div-2 { background-color: #ABBAEA; } .div-3 { background-color: #FBD603; } I love HTML I love CSS I love JavaScript זה יביא לדברים הבאים:
מגניב! שינינו בהצלחה את צבע הרקע של חלוקה זו. לאחר מכן, בואו להכיר יותר מידע על נכס זה. בואו נראה כיצד המאפיין צבע רקע משפיע על חלקים במודל CSS-box.
צבע רקע ומודל ה- CSS Box
על פי מודל התיבה CSS, ניתן לעצב את כל רכיבי ה- HTML כתיבות מלבניות. כל תיבה מורכבת מארבעה חלקים כפי שמוצג בתרשים למטה.
תוכלו לקרוא על דגם התיבה אם אינכם מכירים אותו. השאלה היא, איזה חלק ממודל הקופסא מושפע כשמשנים את צבע הרקע של div? התשובה הפשוטה היא אזור הריפוד ואזור התוכן. בואו נאשר זאת באמצעות דוגמא.
body { background-color: #ABBAEA; } div { height: 200px; margin: 20px; border: 5px solid; background-color: #FBD603; } This is the parent div which contains the div we are testing
This example shows that changing the background color of a div does not affect the border and margin of the div.
זה יביא ל:
מהדוגמה לעיל אנו יכולים לראות כי אזור השוליים ואזור הגבול אינם מושפעים משינוי צבע הרקע. אנו יכולים לשנות את צבע הגבול באמצעות המאפיין border-color. אזור השוליים נשאר שקוף ומשקף את צבע הרקע של מיכל האב.
לסיום, בואו נדון בערכים שמאפיין צבע הרקע יכול לקחת.
ערכי צבע רקע
בדיוק כמו מאפיין הצבע, המאפיין צבע-רקע יכול לקחת שישה ערכים שונים. בואו ניקח דוגמה לשלושת הערכים הנפוצים ביותר. בדוגמה, הגדרנו את צבע הרקע של ה- div לאדום עם ערכים שונים.
/* Keyword value/name of color */ .div-1 { background-color: red; } /* Hexadecimal value */ .div-2 { background-color: #FF0000; } /* RGB value */ .div-3 { background-color: rgb(255,0,0); } The background property can take six different values.
The background property can take six different values.
The background property can take six different values.
שימו לב שכולם מתקבלים באותו צבע רקע.
ערכים אחרים background-colorשהנכס יכול לקחת כוללים ערך HSL, ערכי מילות מפתח מיוחדים וערכים גלובליים. להלן דוגמאות לכל אחד מהם.
/* HSL value */ background-color: hsl(0, 100%, 25%; /* Special keyword values */ background-color: currentcolor; background-color: transparent; /* Global values */ background-color: inherit; background-color: initial; background-color: unset; תוכלו לקרוא עוד על כל אחד מהערכים הללו כאן.
הערה נוספת
בעת הגדרת צבע הרקע של אלמנט, חשוב לוודא שיחס הניגודיות של צבע הרקע וצבע הטקסט שהוא מכיל מספיק גבוה. זאת על מנת להבטיח שאנשים עם ראייה ירודה יוכלו לקרוא את הטקסט בקלות.
שקול את שתי המחלקות הללו.
הניגוד בין צבע הרקע של הדיב הראשון לצבע הטקסט אינו מספיק גבוה כדי שכולם יראו. אז אלא אם כן אתה היחיד שמשתמש באתר שאתה בונה ויש לך ראייה טובה מאוד, עליך להימנע משילובי צבעים כאלה.
לחלוקה השנייה יחס ניגודיות הרבה יותר טוב בין צבע הרקע לצבע הטקסט. לפיכך, אנשים נגישים וברורים יותר לקריאה.
סיכום
במאמר זה ראינו כיצד ניתן לשנות את צבע הרקע של div. דנו גם באילו חלקים במודל תיבת CSS מושפעים מהשינוי בצבע הרקע. לבסוף, דנו בערכים שמאפיין צבע הרקע יכול לקבל.
אני מקווה שמצאת מאמר זה שימושי. תודה שקראת.