logo

גודל רקע ב-CSS

מבוא

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

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

הורדה של xvideoservicethief אובונטו 14.04
 .card-hero inherit 

בואו נבין את הנושא בקצרה.

ערכי מילות מפתח

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

1. כריכה:

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

הבה נבין זאת בעזרת הדוגמה שלהלן.

מחרוזת לצ'אט

דוגמה 1:

קוד:

 Document body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f0f0f0; } .background-container { position: relative; width: 100vw; height: 100vh; background-image: url(&apos;https://e0.pxfuel.com/wallpapers/163/906/desktop-wallpaper-beautiful-nature-with-girl-beautiful-girl-with-nature-and-moon-high-resolution-beautiful.webp&apos;); background-size: cover; background-position: center; text-align: center; color: white; } .background-container h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); } <p>Where every step unveils a new wonder.</p> 

תְפוּקָה

גודל רקע ב-CSS

הֶסבֵּר:

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