דאָ ס ווי צו לייגן אָפּרופיק פּלאַן בילדער ניצן קסס
קוק בייַ פאָלקס וועבסיטעס הייַנט און איין פּלאַן באַהאַנדלונג אַז איר זענט זיכער צו זען איז גרויס, פאַרשטעלן-ספּאַנינג הינטערגרונט בילדער. איינער פון די טשאַלאַנדזשיז מיט אַדינג די בילדער קומט פון דער בעסטער פיר אַז וועבסיטעס מוזן רעספּאָנד צו פאַרשידענע פאַרשטעלן סיזעס און דעוויסעס - אַ צוגאַנג באקאנט ווי אָפּרופיק וועב פּלאַן .
זינט דיין וועבזייטל אויסלייג ענדערונגען און וואָג מיט פאַרשידענע פאַרשטעלן סיזעס, אַזוי אויך מוזן די הינטערגרונט בילדער וואָג זייער גרייס אַקאָרדינגלי.
אין פאַקט, די "פליסיק בילדער" זענען איינער פון די הויפּט ברעקלעך פון אָפּרופיק וועבסיטעס (צוזאמען מיט אַ פליסיק גריד און מידיאַ קוויריז). די דרייַ ברעקלעך האָבן שוין אַ העפטן פון אָפּרופיק וועב פּלאַן זינט די אָנהייב, אָבער בשעת עס האט שטענדיק געווען פערלי גרינג צו לייגן אָפּשיידנדיק ינלינע בילדער צו אַ פּלאַץ (ינלינע בילדער זענען די גראַפיקס וואָס זענען קאָדעד ווי טייל פון די HTML מאַרקאַפּ) די זעלבע מיט הינטערגרונט בילדער (וואָס זענען סטיילד אין די בלאַט ניצן CSS הינטערגרונט פּראָפּערטיעס) האט לאַנג צוגעשטעלט אַ באַטייַטיק אַרויסרופן צו פילע וועב דיזיינערז און פראָנט סוף דעוועלאָפּערס. טאָנפוללי, די דערצו פון די "הינטערגרונט-גרייס" פאַרמאָג אין קסס האט געמאכט דעם מעגלעך.
אין אַ אפגעזונדערט אַרטיקל, איך באדעקט ווי צו נוצן די קסס 3 פאַרמאָג הינטערגרונט-גרייס צו אויסשטרעקן בילדער אין אַ פֿענצטער, אָבער עס איז אַן אַפֿילו בעסער, מער נוצלעך וועג צו פאַרקויפן פֿאַר דעם פאַרמאָג. צו טאָן דאָס, מיר וועלן ניצן די פאלגענדע פאַרמאָג און ווערט קאָמבינאַציע:
הינטערגרונט-גרייס: דעקן;
דער דעקן קייוואָרד פאַרמאָג דערציילט דעם בלעטערער צו וואָג די בילד צו פּאַסיק די פֿענצטער, ראַגאַרדלאַס פון ווי גרויס אָדער קליין אַז פֿענצטער געץ. דער בילד איז סקיילד צו דעקן די גאנצע פאַרשטעלן, אָבער די אָריגינעל פּראַפּאָרשאַנז און אַספּעקט פאַרהעלטעניש זענען געהאלטן בעשאָלעם, פּרעווענטינג די בילד זיך צו ווערן פאַרקרימט.
דער בילד איז געשטעלט אין די פֿענצטער ווי גרויס ווי מעגלעך אַזוי אַז די גאנצע פֿענצטער ייבערפלאַך איז באדעקט. דאָס מיינט אַז איר וועט נישט האָבן קיין ליידיק ספּאַץ אין דיין בלאַט אָדער קיין דיסטאָרשאַן אויף דעם בילד, אָבער עס אויך מיטל אַז עטלעכע פון די בילד קען זיין טריממעד אַוועק דיפּענדינג אויף די אַספּעקט פאַרהעלטעניש פון די פאַרשטעלן און די בילד אין קשיא. פֿאַר בייַשפּיל, די עדזשאַז פון אַ בילד (אָדער שפּיץ, דנאָ, לינקס, אָדער רעכט) קען זיין שנייַדן אַוועק די בילדער, דיפּענדינג אויף וואָס וואַלועס איר נוצן פֿאַר די הינטערגרונט-שטעלע פאַרמאָג. אויב איר אָריענט די הינטערגרונט צו "שפּיץ לינקס", קיין וידעפדיק אויף די בילד וועט קומען אַוועק די דנאָ און רעכט זייטן. אויב איר צענטער דער הינטערגרונט בילד, די וידעפדיק וועט קומען אַוועק פון אַלע די זייטן, אָבער זינט אַז וידעפדיק איז פאַרשפּרייטן אויס, די פּראַל אויף קיין איין זייַט וועט זיין ווייניקער דינען.
ווי צו נוצן הינטערגרונט-גרייס: דעקן;
ווען איר שאַפֿן דיין הינטערגרונט בילד, עס איז אַ גוט געדאַנק צו מאַכן אַ בילד וואָס איז פערלי גרויס. בשעת בראַוזערז קענען מאַכן אַ בילד ווייניקער אָן אַ באמערקט פּראַל אויף וויסואַל קוואַליטעט, ווען אַ בלעטערער וואָג אַרויף אַ בילד צו אַ גרעסערע גרייס ווי עס ס אָריגינעל דימענשאַנז, די וויסואַל קוואַליטעט וועט זיין דיגריידאַד, ווערן בלערלי און פּיקסעלאַטעד. די דאַונסייד צו דעם איז אַז אייער בלאַט נעמט אַ פאָרשטעלונג שלאָגן ווען איר זענט דילינג ריז בילדער צו אַלע סקרינז.
ווען איר טאָן דאָס, מאַכן זיכער צו צוגרייטן די בילדער פֿאַר אראפקאפיע גיכקייַט און וועב עקספּרעס . אין די סוף, איר דאַרפֿן צו געפֿינען די צופרידן מיטל צווישן אַ גרויס גענוג בילד גרייס און קוואַליטעט און אַ גלייַך טעקע גרייס פֿאַר אראפקאפיע ספּידז.
איינער פון די פּראָסט וועגן צו נוצן סקיילינג הינטערגרונט בילדער איז ווען איר ווילן דעם בילד צו נעמען אַרויף די פול הינטערגרונט פון אַ בלאַט, צי אַז בלאַט איז ברייט און זייַענדיק געזען אויף אַ דעסקטאַפּ קאָמפּיוטער אָדער פיל קלענערער און איז געשיקט צו אַ כאַנדכעלד, רירעוודיק דעוויסעס.
ופּלאָאַד דיין בילד צו דיין וועב באַלעבאָס און לייגן עס צו דיין קסס ווי אַ הינטערגרונט בילד:
background-image: url (fireworks-over-wdw.jpg);
הינטערגרונט-איבערחזרן: קיין-איבערחזרן;
הינטערגרונט-שטעלע: צענטער צענטער;
הינטערגרונט-אַטאַטשמאַנט: פאַרפעסטיקט;
לייג דעם בלעטערער פּרעפיקסעד CSS ערשטער:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
דערנאָך לייגן די CSS פאַרמאָג:
הינטערגרונט-גרייס: דעקן;
ניצן אַנדערש בילדער וואס פּאַסן וואַריאַנט דעוויסעס
בשעת אָפּרופיק פּלאַן פֿאַר אַ דעסקטאַפּ אָדער אַ לאַפּטאַפּ דערפאַרונג איז וויכטיק, די פאַרשיידנקייַט פון דעוויסעס וואָס קענען צוטריט די וועב האט געוואקסן באטייטיק, און אַ גרעסערע פאַרשיידנקייַט פון פאַרשטעלן סיזעס קומט מיט וואָס.
ווי פריער דערמאנט, לאָודינג אַ זייער גרויס אָפּרופיק הינטערגרונט בילד אויף אַ סמאַרטפאָנע, פֿאַר בייַשפּיל, איז נישט אַ עפעקטיוו אָדער באַנדווידטה-באַוווסטזיניק פּלאַן.
לערן ווי איר קענען נוצן מידיאַ קוויריז צו דינען בילדער וואָס וועט זיין צונעמען צו די דעוויסעס זיי וועט זיין געוויזן אויף, און ווייַטער פֿאַרבעסערן דיין וועבזייטל קאַמפּאַטאַבילאַטי מיט רירעוודיק דעוויסעס.
אָריגינעל אַרטיקל דורך דזשענבור קרינן. Edited by Jeremy Girard 9/12/17