כך תוסיף תמונות בעיצוב דינמי באמצעות CSS
תסתכל על אתרי אינטרנט פופולריים היום אחד עיצוב טיפול שאתה בטוח לראות הוא גדול, מסך פורש תמונות רקע. אחד האתגרים עם הוספת תמונות אלה מגיע מהנוהג המומלץ שאתרי אינטרנט חייבים להגיב לגדלים ולמכשירים שונים בגישה - גישה הידועה כעיצוב אינטרנט מותאם .
מאז פריסת האתר שלך משתנה וקשקשים עם גדלי מסך שונים, כך גם תמונות רקע אלה בקנה מידה גודל שלהם בהתאם.
למעשה, אלה "תמונות נוזל" הם אחד החלקים המפתח של אתרי אינטרנט תגובה (יחד עם רשת נוזלים שאילתות התקשורת). שלוש חתיכות אלה היו מצרך של עיצוב אתרים מגיב מאז תחילתו, אך למרות שזה תמיד היה די קל להוסיף תמונות מוטבעות תגובה לאתר (תמונות מוטבעות הן גרפיקה מקודדים כחלק מסימון ה- HTML), עושה את אותו עם תמונות רקע (אשר מנוסח לתוך הדף באמצעות CSS רקע המאפיינים) סיפק זמן רב אתגר משמעותי מעצבי אינטרנט רבים מפתחי קצה הקדמי. למרבה המזל, תוספת של "רקע בגודל" נכס ב- CSS עשה את זה אפשרי.
במאמר נפרד, כיסיתי כיצד להשתמש CSS3 נכס בגודל הרקע כדי למתוח תמונות כדי להתאים בחלון, אבל יש דרך טובה יותר, שימושית יותר לפריסה עבור נכס זה. לשם כך, נשתמש בשילוב הנכסים והרכוש הבאים:
background-size: כריכה;
את מילת המפתח לכסות את הנכס אומר את הדפדפן כדי לשנות את גודל התמונה כדי להתאים את החלון, לא משנה כמה גדול או קטן חלון זה מקבל. התמונה היא scaled לכסות את המסך כולו, אבל הפרופורציות המקוריות יחס הממדים נשמרים ללא פגע, מניעת התמונה עצמה מלהיות מעוות.
התמונה ממוקמת בחלון גדול ככל האפשר, כך שמשטח החלון כולו מכוסה. פירוש הדבר כי לא תהיה לך כתמים ריקים בדף שלך או כל עיוות על התמונה, אבל זה גם אומר כי חלק מהתמונה עשויה להיות trimmed off בהתאם יחס הממדים של המסך ואת התמונה המדוברת. לדוגמה, ניתן לקצץ את הקצוות של תמונה (למעלה, למטה, שמאלה או ימינה) בתמונות, בהתאם לערכים שבהם אתה משתמש עבור מיקום מיקום הרקע. אם אתה מכוון את הרקע "למעלה משמאל", כל עודף על התמונה יגיע בצד התחתון ואת הצד הימני. אם אתה ממקד את תמונת הרקע, העודף יגיע מכל הצדדים, אך מאחר שהפרזה זו מתפשטת, ההשפעה על כל צד תהיה נמוכה יותר.
כיצד להשתמש בגודל הרקע: כיסוי;
בעת יצירת תמונת הרקע שלך, מומלץ ליצור תמונה גדולה למדי. בעוד שהדפדפנים יכולים להפוך תמונה קטנה יותר ללא השפעה ניכרת על האיכות החזותית, כאשר דפדפן מגדיל את התמונה לגודל גדול ממידות המקור שלה, האיכות החזותית תהיה מושפעת, ותהפוך לטשטוש ופיקסל. החיסרון הזה הוא כי הדף שלך מקבל להיט כאשר אתה מספק תמונות ענק לכל המסכים.
כאשר אתה עושה את זה, ודא שצריך להכין את התמונות האלה עבור מהירות ההורדה ומסירה באינטרנט . בסופו של דבר, אתה צריך למצוא את המדיום שמח בין גודל תמונה גדול מספיק ואיכות גודל קובץ סביר עבור מהירויות הורדה.
אחת הדרכים הנפוצות להשתמש בתמונות רקע של קנה מידה היא כאשר אתה רוצה שהתמונה תעלה על הרקע המלא של הדף, בין אם הדף רחב ובין אם הוא מוצג במחשב שולחני או קטן בהרבה, ונשלח אל מחשב כף יד, לנייד התקנים.
העלה את התמונה שלך למארח האינטרנט שלך והוסף אותה ל- CSS כתמונת רקע:
background-image: כתובת אתר (fireworks-over-wdw.jpg);
רקע לחזור: לא לחזור;
background-position: מרכז מרכז;
background-attachment: fixed;
הוסף את הדפדפן לקידומת CSS תחילה:
-webkit-background-size: כיסוי;
-Moz-background-size: כריכה;
-O-background-size: כריכה;
לאחר מכן הוסף את המאפיין CSS:
background-size: כריכה;
שימוש בתמונות שונות המתאימות התקנים שונים
בעוד עיצוב תגובה עבור שולחן עבודה או ניסיון מחשב נייד חשוב, מגוון של מכשירים שיכולים לגשת לאינטרנט גדל באופן משמעותי, מגוון גדול יותר של גודל המסך מגיע עם זה.
כפי שצוין לעיל, טעינת תמונה רקע גדול מאוד תגובה על טלפון חכם, למשל, הוא לא יעיל או רוחב פס בהכרה עיצוב.
למד כיצד תוכל להשתמש בשאילתות מדיה כדי להציג תמונות שיתאימו למכשירים שיוצגו בהם, וכן לשפר את תאימות האתר שלך עם מכשירים ניידים.
מאמר מקורי מאת ג'נפייר קרינין. בעריכת ג'רמי ג'יררד 9/12/17