סטייל דיין בילדער און נוצן בילדער אין סטיילז
פילע מענטשן נוצן CSS צו סטרויערן טעקסט, טשאַנגינג די שריפֿט, די קאָליר, די גרייס און מער. אבער איין זאַך אַז פילע מענטשן אָפט פאַרגעסן איז אַז איר קענען נוצן CSS מיט בילדער.
טשאַנגינג די בילד זיך
CSS אַלאַוז איר צו סטרויערן ווי די בילד דיספּלייז אויף די בלאַט. דאָס קען זיין טאַקע נוציק פֿאַר בעכעסקעם דיין בלעטער קאָנסיסטענט. דורך באַשטעטיקן סטיילז אויף אַלע בילדער, איר שאַפֿן אַ נאָרמאַל קוק פֿאַר דיין בילדער. עטלעכע פון די זאכן איר קענען טאָן:
- לייג אַ גרענעץ אָדער אַוטליין אַרום די בילדער
- אַראָפּנעמען די בונט ברעג וועגן לינגקט בילדער
- אַדזשאַסטינג די ברייט און / אָדער הייך פון די בילדער
- לייגן אַ קאַפּ שאָטן
- דרייען דעם בילד
- טוישן די סטיילז ווען די בילד איז כאַווערד איבער
געבן דיין בילד אַ גרענעץ איז אַ גרויס אָרט צו אָנהייבן. אבער איר זאָל באַטראַכטן מער ווי בלויז די גרענעץ - טראַכטן וועגן די גאנצע ברעג פון דיין בילד און סטרויערן די מאַרדזשאַנז און וואַטן ווי געזונט. אַ בילד מיט אַ דין שוואַרץ גרענעץ קוקט פייַן, אָבער לייגן עטלעכע וואַטן צווישן די גרענעץ און די בילד קענען קוקן אַפֿילו בעסער.
img {
גרענעץ: 1 פּקס האַרט שוואַרץ;
padding: 5px;
}
עס איז אַ גוטע געדאַנק צו שטענדיק פאַרבינדן ניט-דעקאָראַטיווע בילדער , ווען מעגלעך. אבער ווען איר טאָן, געדענקען אַז רובֿ בראַוזערז לייגן אַ בונט ברעג אַרום דעם בילד. אפילו אויב איר נוצן די אויבן קאָד צו טוישן די גרענעץ, די לינק וועט אָווועררייד אַז סייַדן איר אַראָפּנעמען אָדער טוישן די גרענעץ אויף די לינקס. צו טאָן דאָס איר זאָל נוצן אַ CSS קינד הערשן צו באַזייַטיקן אָדער טוישן די גרענעץ אַרום לינגקט בילדער:
img> a {
גרענעץ: קיין;
}
איר קענען אויך נוצן CSS צו טוישן אָדער שטעלן די הייך און ברייט פון דיין בילדער. בשעת עס ס 'נישט אַ גרויס געדאַנק צו נוצן דעם בלעטערער צו סטרויערן בילד סיזעס ווייַל פון אראפקאפיע ספּידז, זיי ווערן פיל בעסער אין רעסיזינג בילדער אַזוי אַז זיי נאָך קוק גוט. און מיט קסס איר קענען שטעלן דיין בילדער צו אַלע זיין אַ נאָרמאַל ברייט אָדער הייך אָדער אַפֿילו שטעלן די דימענשאַנז צו זיין קאָרעוו צו די קאַנטיינער.
געדענקט, ווען איר רעסיזע בילדער, פֿאַר בעסטער רעזולטאטן, איר זאָל נאָר רעסיזע איינער ויסמעסטונג - די הייך אָדער די ברייט. דעם וועט ענוסרע אַז דער בילד האלט זייַן אַספּעקט פאַרהעלטעניש, און אַזוי טוט נישט קוקן מאָדנע. שטעלן די אנדערע ווערט צו אַוטאָ אָדער לאָזן עס אויס צו זאָגן דעם בלעטערער צו האַלטן די אַספּעקט פאַרהעלטעניש קאָנסיסטענט.
img {
ברייט: 50%;
הייך: אַוטאָ;
}
CSS3 אָפפערס אַ לייזונג צו דעם פּראָבלעם מיט די נייַ פּראָפּערטיעס כייפעץ-פּאַסיק און כייפעץ-שטעלע. מיט די פּראָפּערטיעס איר וועט קענען צו באַשליסן די פּינטלעך בילד הייך און ברייט און ווי די אַספּעקט פאַרהעלטעניש זאָל זיין כאַנדאַלד. דעם קען שאַפֿן לעאַפקאָקסינג יפעקץ אַרום דיין בילדער אָדער קראַפּינג צו באַקומען די בילד צו פּאַסיק אין די גרייס פארלאנגט.
בשעת די קסס 3 כייפעץ-פּאַסיק און כייפעץ-שטעלע פּראָפּערטיעס זענען נישט וויידלי שטיצט נאָך, עס זענען אנדערע CSS3 פּראָפּערטיעס וואָס זענען געזונט געשטיצט אין רובֿ מאָדערן בראַוזערז וואָס איר קענען נוצן צו מאָדיפיצירן דיין בילדער. זאכן ווי קאַפּ שאַדאָוז, ראַונדיד עקן, און טראַנספערמיישאַנז צו דרייען, סקיו, אָדער מאַך דיין בילדער אַלע אַרבעט רעכט איצט אין רובֿ מאָדערן בראַוזערז. איר קענען נוצן CSS טראַנזישאַנז צו מאַכן די בילדער טוישן ווען כאַווערד איבער, אָדער קליקט, אָדער נאָר נאָך אַ צייַט פון צייַט.
ניצן בילדער ווי באַקקגראָונדס
CSS מאכט עס גרינג צו מאַכן פאַנטאַזיע באַקגראַונדז מיט דיין בילדער.
איר קענען לייגן באַקגראַונדז צו די גאנצע בלאַט אָדער נאָר אַ ספּעציפיש עלעמענט. עס איז גרינג צו מאַכן אַ הינטערגרונט בילד אויף דעם בלאַט מיט די הינטערגרונט-בילד פאַרמאָג:
body {
background-image: url (background.jpg);
}
טוישן די גוף סעלעקטאָר צו אַ ספּעציפיש עלעמענט אויף דעם בלאַט צו שטעלן די הינטערגרונט אויף בלויז איין עלעמענט.
אן אנדער שפּאַס זאַך איר קענען טאָן מיט בילדער איז צו שאַפֿן אַ הינטערגרונט בילד וואָס טוט ניט מעגילע מיט די רעשט פון די בלאַט - ווי אַ וואָטערמאַרק. איר נאָר נוצן די נוסח הינטערגרונט-אַטאַטשמאַנט: פאַרפעסטיקט; צוזאמען מיט דיין הינטערגרונט בילד. אנדערע אָפּציעס פֿאַר דיין באַקגראַונדז אַרייַננעמען געמאכט זיי קאַכל נאָר כאָריזאַנטאַלי אָדער ווערטיקלי ניצן די הינטערגרונט-איבערחזרן פאַרמאָג.
שרייַבן הינטערגרונט-איבערחזרן: איבערחזרן-רענטגענ; צו קאַכל די בילד כאָריזאַנטאַלי און הינטערגרונט-איבערחזרן: איבערחזרן-י; צו קאַכל ווערטיקלי. און איר קענען פּאָסטן דיין הינטערגרונט בילד מיט די הינטערגרונט-שטעלע פאַרמאָג.
און קסס 3 מוסיף מער סטיילז פֿאַר דיין באַקגראַונדז. איר קענען אויסשטרעקן דיין בילדער צו פּאַסיק קיין גרייס הינטערגרונט אָדער שטעלן די הינטערגרונט בילד צו וואָג מיט די פֿענצטער גרייס . איר קענען טוישן די שטעלע און דעמאָלט קלעמערל די הינטערגרונט בילד. אָבער איינער פון די בעסטער זאכן וועגן קסס 3 איז אַז איר קענען איצט שיכטע קייפל הינטערגרונט בילדער צו שאַפֿן אַפֿילו מער ינטראַקאַט יפעקס.
HTML5 Helps Style Images
די פיגורע עלעמענט אין הטמל 5 זאָל זיין געשטעלט אַרום קיין בילדער וואָס קענען שטיין זיך אין דעם דאָקומענט. איין וועג צו טראַכטן וועגן עס איז אויב די בילד קען דערשייַנען אין אַ אַפּפּענדיקס, עס זאָל זיין ין די פיגורע עלעמענט. איר קענען נוצן דעם עלעמענט און די FIGCAPTION עלעמענט צו לייגן סטיילז צו דיין בילדער.