מדריך לימוד זה ידגים כיצד להשתמש בתמונות רקע עם CSS. אז, בואו נתחיל!
כיצד להשתמש במספר תמונות רקע עם CSS?
ה-CSS ' רקע כללי ' מאפיין הוא מאפיין קיצור המכיל רקע, רקע-מצורף, קליפ, תמונה, חזרה, מקור, גודל ומאפייני מיקום. ניתן להשתמש במאפיין רקע לציון כתובות האתרים של מספר תמונות. לאחר מכן, התמונות הללו ממוקמות ומוגדרות בהתאם.
ניקח דוגמה שבה אלמנט div אחד מכיל רק תמונה אחת בתור הלוגו של דף האינטרנט בעוד שהשני מכיל שלוש תמונות.
דוגמה: הוספת תמונות רקע מרובות עם CSS
ב-HTML, הוסף אלמנט div עבור הלוגו וציין את שם המחלקה. למשל, קראנו לזה ' סֵמֶל '. ה-div השני משתמש במספר תמונות, אז קראנו לו ' ריבוי תמונות '. עם זאת, אתה יכול לציין את שם הכיתה לפי העדפותיך.
HTML
< div מעמד = 'סֵמֶל' >< / div >< div מעמד = 'תמונות מרובות' >< / div >
בחלק הבא נתאים את התמונות באמצעות מאפיין הרקע של CSS.
סגנון 'לוגו' div
.סֵמֶל {רוֹחַב : 100% ;
גוֹבַה : 50 פיקסלים ;
ריפוד : 5 פיקסלים ;
שולים : 5 פיקסלים ;
גודל רקע : 100 פיקסלים ;
רקע-חזרה : ללא חזרה ;
תמונת רקע : כתובת אתר ( images/linux-logo.png ) ;
}
האלמנט div עם המחלקה ' סֵמֶל ' מוחל עם המאפיינים הבאים:
- ' רוֹחַב 'מאפיין משמש להגדרת רוחב האלמנט ל' 100% '.
- ' גוֹבַה מאפיין ' משמש להגדרת גובה האלמנט ל' 50 פיקסלים '.
- ' ריפוד המאפיין ' משמש להגדרת ' 5 פיקסלים ' רווח סביב התוכן שצוין של האלמנט.
- ' שולים מאפיין ' משמש להגדרת ' 5 פיקסלים 'מרחב סביב האלמנט.
- ' גודל רקע ' מאפיין מגדיר את גודל תמונת הרקע של האלמנט כ' 100 פיקסלים '.
- ' רקע-חזרה 'עם הערך' ללא חזרה ' מציג את הרקע פעם אחת בלבד.
- ' תמונת רקע 'מאפיין משמש לציון כתובת האתר של התמונה.
סגנון 'מספר תמונות' div
.מרובות-תמונות {רוֹחַב : 90% ;
גוֹבַה : 45vh ;
שולים : 1 פיקסלים אוטומטי ;
ריפוד : 20 פיקסלים ;
גודל רקע : 150 פיקסלים ;
צבע רקע : rgb ( 157 , 154 , 151 ) ;
תמונת רקע : כתובת אתר ( images/office.png ) , כתובת אתר ( images/html.png ) , כתובת אתר ( images/laptop.png ) ;
רקע-חזרה : ללא חזרה , ללא חזרה , ללא חזרה ;
מיקום רקע : שמאלה , מֶרְכָּז , ימין ;
}
כעת, סגננו את המיכל השני באופן הבא:
- ' צבע רקע ' מאפיין מציין את צבע הרקע של האלמנט.
- ' תמונת רקע ' המאפיין מציין מספר כתובות אתרים של תמונות.
- ' רקע-חזרה ' מאפיין מגדיר ערכים עבור התמונות ברצף של התמונות שצוינו במאפיין רקע-תמונה. שתי התמונות מוגדרות כבלתי חוזרות, כלומר הן יופיעו בדפדפן פעם אחת בלבד.
- ' מיקום רקע ' מתאים את מיקום התמונה ברצף התמונות שצוין במאפיין רקע-תמונה. התמונה הראשונה תמוקם בצד שמאל, השנייה במרכז והשלישית תמוקם בצד ימין.
על ידי אספקת הקוד שסופק לעיל, התוצאה בדפדפן תיראה כך:
בדרך זו, נוכל להתאים את המיקום של מספר תמונות באמצעות CSS.
סיכום
כדי להפוך את האפליקציה לבדרנית ואינטראקטיבית, מפתחים משתמשים בתמונות ובצבעים שונים. אנו יכולים להגדיר מספר תמונות עם מאפייני רקע של CSS, כגון מיקום רקע, חזרה על רקע, גודל רקע ועוד. מדריך זה הדגים את השימוש במספר תמונות רקע עם דוגמאות CSS.