הפודקאסט של CSS - 053: רקע
רקעים
מאחורי כל תיבת CSS נמצאת שכבה מיוחדת שנקראת שכבת רקע. שירות CSS מספק מגוון דרכים לביצוע שינויים משמעותיים, כולל מתן הרשאה לשימוש ברקעים מרובים.
שכבות הרקע הן הרחוקות ביותר מהמשתמש, ומרונדרות מאחורי תוכן של תיבה החל מאזור padding-box
שלה. כך שכבת הרקע לא תהיה חופפת כלל לגבולות.
צבע הרקע
אחד האפקטים הפשוטים ביותר שאפשר להחיל על שכבת רקע הוא הגדרת הצבע. הערך הראשוני של background-color
הוא transparent
, ולכן התוכן של הורה גלוי. ערכת צבעים חוקית על שכבת הרקע נמצאת מאחורי דברים אחרים המצוירים על אותו רכיב.
תמונות רקע
מעל לשכבת ה-background-color
אפשר להוסיף תמונת רקע באמצעות המאפיין background-image
. background-image
מקבל את התנאים הבאים:
- כתובת URL של תמונה או URI של נתונים באמצעות פונקציית CSS
url
. - תמונה שנוצרה באופן דינמי באמצעות פונקציית CSS הדרגתית.
הגדרה של תמונת רקע באמצעות הפונקציה url
של CSS
רקעים הדרגתיים של 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
תמונות הרקע ממוקמות בפינה השמאלית העליונה של תיבת CSS.
background-position
באופן מפורש כדי לשנות את מיקום ברירת המחדל של תמונת רקע.
כברירת מחדל, תמונות הרקע לא חוזרות על עצמן.
background-repeat: no-repeat
באופן מפורש כדי לא לחזור על תמונת רקע. בנוסף, אפשר להשתמש ב-background-repeat: repeat-x
וב-background-repeat: repeat-y
כדי למנוע חזרה על צירים ספציפיים.
אילו מההצהרות הבאות לגבי background-position
תקפות?
background-position: 50% left
background-position: top right 33%
background-position: right bottom
background-position: left
כדי להגדיר תמונת רקע שתהיה קבועה באזור התצוגה שבו אתם משתמשים:
background-position: fixed
background-position
.'
background-fixed-to-viewport: true
background-fixed-to-viewport
עדיין לא קיים ב-CSS.
background-attachment: fixed
background-attachment: fixed
מגדיר במפורש את תמונת הרקע שתותקן בתוך אזור התצוגה הנוכחי.
background-attachment: scroll
background-attachment
הוא המאפיין שבו משתמשים כדי להגדיר תמונת רקע שתותקן בתוך אזור תצוגה. עם זאת, scroll
הוא ערך ברירת המחדל של המאפיין, שמתקן את תמונת הרקע כברירת מחדל לתיבה שהתוכן שבתיבה לא יושפע ממנה.'
ברירת המחדל של מקור הרקע בתוך תיבת CSS הוא:
content-box
background-origin
, אך אינו ברירת המחדל.
border-box
background-origin
ואת הגבולות המאורגנים מראש על רקעים, אבל הוא לא ברירת המחדל.
padding-box
background-origin
. מאפשר עיבוד של הרקע מעבר לתוכן ועד לגבול של תיבה.
margin-box
background-origin
.