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

לִמְתוֹחַ רקע CSSאמצעים התאפשרו עם הופעתו של CSS3, במיוחד באמצעות המאפיין רקע גודל. אני חייב לומר שהמאפיין הזה עובד הרבה יותר טוב מפתרונות דומים ב-Javascript (שהשתמשו בהם לפני הופעת גודל הרקע), מכיוון שהוא מגיב מהר יותר ובצורה נאותה יותר לשינויים בגודל הדפדפן, מחליק תמונה מתוחה מהר יותר, וכמו הם אהבו לומר בתחילת שנות ה-2000, x, - "יעבוד אפילו עם Javascript מושבת."

פתרון: כיצד למתוח את הרקע באמצעות כלי CSS

למאפיין גודל רקע יכולים להיות ערכים מרובים.
1) זו יכולה להיות אחת מההנחיות: לכסות או להכיל.

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

2) זה יכול להיות אחוז (100% או 94% מרוחב המיכל). במקרה זה, אתה יכול להשתמש בערך 1 אחוז או 2. אם יש 2 ערכים, אז גם הגובה והרוחב של התמונה יעברו קנה מידה בו-זמנית, וכל ערך מותאם ביחס לאחוזים המצוינים ב- פרמטרים).

גודל רקע: 100%; /*מקביל להנחיית הכריכה*/ גודל רקע: 100% 50%; /*הרוחב יהיה 100% מרוחב הבלוק, אבל הגובה יהיה רק ​​50%, סביר להניח שהתמונה תהיה מעוותת*/

3) ערך מספרי ישירות (בפיסקלים, סנטימטרים, em וכו'). יכולים להיות גם 2 (או 1) פרמטרים, כמו במקרה הקודם.
4) ערך אוטומטי. מציין שהתמונה לא תימתח, אך ייעשה שימוש בגודל המקורי. במקרה זה, יכולים להיות גם 2 או 1 פרמטרים כלומר, אתה יכול לציין את הדברים הבאים:

גודל רקע: 60% אוטומטי; /*רוחב התמונה יהיה 60%, והגובה יהיה פרופורציונלי לגודל התמונה המקורית*/

היכן יעבוד פתרון מתיחת הרקע של CSS?

אם לשפוט לפי אתר Can I Use, זה יעבוד בסך הכל דפדפנים מודרניים, כולל גרסאות IE לא נמוכות מ-9. לכן, באופן עקרוני, אין סיבה לדאגה. ראה טבלת תאימות:

מצאתי את השיעור הזה על אחד ערוץ יוטיוב. תכונה מאוד שימושית למעצב אתרים לדעתי.

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

זה אמור להיראות כך:

בואו נתחיל. פתחו את התמונה שלנו ב-PhotoShop ובחרו את האובייקט שאנחנו צריכים:

לאחר מכן, עבור לכרטיסייה בחירה >> שמור בחירה

והגדר איזה שם שרירותי לבחירה הזו:

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

והקפד לציין את האובייקט המוגן:

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

ברכות. במאמר זה, אני רוצה לשתף שלוש דרכים למקם תמונה כרקע של עמוד שלם באמצעות HTML + CSS בלבד (ללא JS).

אז הדרישות שלנו לתמונת הרקע הן כדלקמן:

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

שיטה 1

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

הגדר את הרקע להיות קבוע וממורכז, ולאחר מכן התאם את גודלו באמצעות רקע-גודל: cover .

HTML (תמונת רקע: url(images/background.jpg); background-repeat: no-repeat; רקע-מיקום: מרכז מרכז; רקע-מצורף: קבוע; -webkit-background-size: cover; -moz-background- גודל: cover; -o-background-size: cover רקע: cover )

שיטה זו פועלת ב

Chrome (כל גרסה) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

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

שיטה 2

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

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

img.background ( גובה מינימלי: 100%; רוחב מינימלי: 640 פיקסלים; רוחב: 100%; גובה: אוטומטי; מיקום: קבוע; למעלה: 0; שמאלה: 0; /* תלוי בגודל התמונה */ מסך מדיה ו (מקסימום רוחב: 640 פיקסלים)( img.bg ( משמאל: 50%; שוליים-שמאליים: -320 פיקסלים; ) ) )

שיטה זו פועלת ב:

• כל גרסה של דפדפנים טובים (Chrome, Opera, Firefox, Safari)
• IE 9+

שיטה 3

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

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