רקעים

הפודקאסט של שירות ה-CSS – 053: רקע

רקעים

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

שכבות הרקע הן הרחוקות ביותר מהמשתמש, ומעובדות מאחורי תוכן של תיבה החל מאזור padding-box שלה. כך שכבת הרקע לא חופפת לגבולות בכלל.

צבע הרקע

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

תמונות רקע

מעל השכבה background-color אפשר להוסיף תמונת רקע באמצעות המאפיין background-image. background-image מקבל את התנאים הבאים:

• כתובת URL של תמונה או URI של נתונים באמצעות פונקציית ה-CSS url.
• תמונה שנוצרה באופן דינמי על ידי פונקציית CSS הדרגתית.

הגדרת תמונת רקע באמצעות פונקציית ה-CSS url

רקעים הדרגתיים של CSS

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

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

הדגמה שממחישה שימוש בתמונת רקע באמצעות פונקציות הדרגתיות:

חזרה על תמונות רקע

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

כדי לשנות זאת, משתמשים במאפיין background-repeat עם אחד מהערכים הבאים:

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

בעזרת המאפיין background-repeat אפשר להגדיר את ההתנהגות של ציר ה-x וה-y בנפרד. הפרמטר הראשון מגדיר את התנהגות החזרה האופקית והפרמטר השני מגדיר את התנהגות החזרה האנכית.

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

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

הערך repeat-x חוזר על תמונה רק לרוחב. הוא מקביל ל-repeat no-repeat.

ההדגמה הבאה מדגימה את היכולות האלה של הנכס background-repeat:

מיקום הרקע

יכול להיות שתבחינו בכך שתמונות מסוימות באינטרנט מעוצבות באמצעות הצהרת background-repeat: no-repeat, תמונות כאלה מוצגות בפינה השמאלית העליונה של המאגר שלהן.

המיקום הראשוני של תמונות הרקע הוא מימין למעלה. המאפיין background-position מאפשר לשנות את ההתנהגות הזו על ידי שינוי המיקום של התמונה.

בדומה ל-background-repeat, המאפיין background-position מאפשר למקם תמונות לאורך ציר ה-x וה-y באופן בלתי תלוי עם שני ערכים כברירת מחדל.

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

כשנעשה שימוש במילות מפתח רק בסדר של מילות המפתח:

background-position: left 50%;

background-position: top left;

background-position: left top;

  background-position: 50% left;

  background-position: left right;

גם בנכס background-position יש קיצור דרך נוח של ערך אחד; הערך שהושמט הופך ל-50%. הנה דוגמה שממחישה זאת באמצעות מילות המפתח שהנכס background-position מקבל:

בנוסף לצורת ברירת המחדל של שני הפרמטרים ולצורת הפרמטר אחת; הנכס background-position מקבל גם עד ארבעה פרמטרים;

כשמשתמשים בשלושה או בארבעה פרמטרים, לפני ערך של אורך או אחוז של CSS צריכים להופיע מילות המפתח top, left, right או bottom כדי שהדפדפן יוכל לחשב מאיזה קצה של תיבת ה-CSS להגיע ההיסט.

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

background-position: bottom 88% right;

background-position: right bottom 88%;

background-position: 88% bottom right;

background-position: bottom 88% right 33%;

background-position: right 33% bottom 88%;

background-position: 88% 33% bottom left;

אם החלת background-position: top left 20% על תמונת רקע של CSS היא תמוקם בחלק העליון של התיבה, הערך 20% מייצג היסט של 20% משמאל לתיבה (על ציר ה-X).

אם מחילים את background-position: top 20% left על תמונת רקע של CSS, הערך של 20% מייצג היסט של 20% מהחלק העליון של תיבת ה-CSS (על ציר ה-y), והתמונה ממוקמת בצד שמאל של התיבה.

כאשר משתמשים בארבעה פרמטרים, שתי מילות המפתח מותאמות לשני ערכים שתואמים לקיזוז מול המקור של כל מילת מפתח שצוינה. אם מוסיפים את background-position: bottom 20% right 30% לתמונת רקע, תמונת הרקע תמוקם 20% מהחלק התחתון ו-30% מימין לתיבת ה-CSS.

ההדגמה הבאה מדגימה את ההתנהגות הזו:

הנה עוד דוגמאות לשימוש בנכס background-position באמצעות שילוב של ערכי CSS ומילות מפתח:

גודל הרקע

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

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

הנכס background-size מקבל את מילות המפתח הבאות:

• auto: כשמשתמשים בו באופן עצמאי, גודל תמונת הרקע נקבע על סמך הרוחב והגובה המהותיים שלה. כשמשתמשים ב-auto לצד ערך CSS נוסף לציון הרוחב (הפרמטר הראשון) או לגובה (הפרמטר השני), המידה שהוגדרה כ-auto נקבעת לפי הצורך כדי לשמור על יחס הגובה-רוחב הטבעי של התמונה. זו התנהגות ברירת המחדל של המאפיין background-size.
• cover: מכסה את כל השטח של שכבת הרקע. כתוצאה מכך, ייתכן שהתמונה תימתח או תיחתך.
• contain: התאמת גודל התמונה כך שתמלא את השטח מבלי למתוח או לחתוך. כתוצאה מכך, יכול להיות שיישאר שטח ריק שיגרום לתמונה לחזור, אלא אם הערך של background-repeat מוגדר ל-no-repeat.

בשתיהן מותר להשתמש באופן עצמאי ללא פרמטר נוסף.

ההדגמה הבאה ממחישה את הפעולה של מילות המפתח האלה:

הדגמה של החלת מילות המפתח האלה על background-size:

קובץ מצורף ברקע

בעזרת המאפיין background-attachment אפשר לשנות את התנהגות המיקום הקבוע של תמונות רקע (תמונות הן חלק משכבת רקע) ברגע שהשכבה גלויה במסך.

ניתן להזין בו 3 מילות מפתח: scroll, fixed ו-local.

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

הערך fixed מתקן את המיקום של תמונות רקע לפי אזור התצוגה.

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

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

מקור הרקע

בעזרת המאפיין background-origin אפשר לשנות את אזור הרקעים שמשויך לתיבה מסוימת. הערכים שהנכס מקבל תואמים לאזורים border-box, padding-box ו-content-box של תיבה .

אתם יכולים לנסות את האפשרויות האלה בעזרת ההדגמה הבאה:

קליפ ברקע

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

בדומה ל-background-origin, האזורים שאפשר לציין הם border-box, padding-box ו-content-box שתואמים למקומות שבהם ניתן לעבד שכבת רקע של CSS. כשמשתמשים במילות המפתח האלה, כל רינדור של הרקע שנמצא רחוק יותר מהאזור שצוין ייחתך או ייחתך.

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

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

רקעים מרובים

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

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

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

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

background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
    url("https://assets.codepen.io/7518/blob.svg"),
    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
  background-size: contain, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% 50%, 10% 50%, 0% 0%;
  background-origin: padding-box, border-box, content-box;

קיצור הרקע של הרקע

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

background:
  <background-image>
  <background-position> / <background-size>?
  <background-repeat>
  <background-attachment>
  <background-origin>
  <background-clip>
  <background-color>?

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

ההצהרה הבאה מקצרת את הרקע ומקורו בתיבת התוכן:

background: url("https://assets.codepen.io/7518/blob.svg") 50%
      50% / contain no-repeat content-box;

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

background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;

בדיקת ההבנה

בוחנים את הידע שלכם על רקעים של CSS