Ukusebenzisa i-CSS Ngezithombe

Isitayela Izithombe Zakho bese usebenzisa Izithombe ezitayela

Abantu abaningi basebenzisa i- CSS ukulungisa umbhalo, ukushintsha ifonti, umbala, usayizi nokuningi. Kodwa into eyodwa abantu abaningi abavame ukuyikhohlwa ukuthi ungasebenzisa i-CSS nezithombe kanye.

Ukushintsha Isithombe Ngokwalo

I-CSS ikuvumela ukuba ulungise indlela isithombe esibonisa ngayo ekhasini. Lokhu kungasiza kakhulu ekugcineni amakhasi akho ahlale ekhona. Ngokusetha izitayela kuzo zonke izithombe, udala ukubukeka okujwayelekile kwezithombe zakho. Ezinye zezinto ongayenza:

Ukunikeza isithombe sakho umngcele indawo enhle ukuqala. Kodwa kufanele ucabangele okungaphezu nje komngcele - cabanga ngomphetho wonke wesithombe sakho uphinde ulungise ama-margins kanye ne- padding . Isithombe esinomngcele omnyama omnyama sibonakala sihle, kodwa ukwengeza okunye okuphakathi komngcele nesithombe kungabonakala kungcono nakakhulu.

img {
Umngcele: 1px omnyama oqinile;
i-padding: 5px;
}}

Kungumqondo omuhle ukuxhumanisa njalo izithombe ezingekho zokuhlobisa , uma kungenzeka. Kodwa uma wenza, khumbula ukuthi iziphequluli eziningi zengeza umngcele onemibala ezungeze isithombe. Ngisho noma usebenzisa ikhodi engenhla ukuze ushintshe umngcele, isixhumanisi sizokhipha lokho ngaphandle kokuthi ususe noma ushintshe umngcele kusixhumanisi. Ukuze wenze lokhu kufanele usebenzise umthetho wezingane we-CSS ukuze ususe noma ushintshe umngcele ozungeze izithombe ezixhunyiwe:

img> i {
umngcele: akekho;
}}

Ungasebenzisa futhi i-CSS ukuze ushintshe noma usethe ukuphakama nobubanzi bezithombe zakho. Nakuba akuwona umqondo omuhle ukusebenzisa isiphequluli ukuze ulungise ubukhulu besithombe ngenxa yokuvinjelwa kokulanda, bazuza kangcono ekuguquleni izithombe ukuze babonakale behle. Futhi nge-CSS ungabeka izithombe zakho kuzo zonke zibe ububanzi obujwayelekile noma ukuphakama noma ngisho usethe ubukhulu bokuthi buhlobene nesitsha.

Khumbula, uma ushintsha izithombe, ukuthola imiphumela engcono kakhulu, kufanele unikeze ubukhulu ubukhulu obulodwa - ukuphakama noma ububanzi. Lokhu kuzokwenza ukuthi isithombe sigcine ububanzi bayo, ngakho-ke asibukeli okungajwayelekile. Setha enye inzuzo ngokuzenzakalela noma uyishiye ngaphandle ukutshela isiphequluli ukuze ugcine isilinganiso sesici saguquguquke.

img {
ububanzi: 50%;
ukuphakama: auto;
}}

I-CSS3 inikeza isixazululo kule nkinga ngezakhiwo ezintsha zento-efanelekile nendawo-indawo. Ngalezi zakhiwo uzokwazi ukuchaza ukuphakama kwesithombe ngokuqondile nobubanzi nokuthi indlela yesici kufanele isetshenziswe kanjani. Lokhu kungase kudale imiphumela yebhokisi lezincwadi ezungeze izithombe zakho noma ukuqoqa ukuze isithombe silingane nobukhulu obudingekayo.

Ngenkathi izindawo ze-CSS3 ezingafaneleki nezindawo ezingahambisani nazo zisekelwe kakhulu okwamanje, zikhona nezinye izindawo ze-CSS3 ezisisekelwa kakhulu kuziphequluli eziningi zanamuhla ongazisebenzisa ukuguqula izithombe zakho. Izinto ezinjengezithunzi zamatshe, izingqimba ezizungezayo, nezinguquko ukushintshanisa, ukuguqa, noma ukuhambisa izithombe zakho zonke kusebenza manje kuziphequluli eziningi zanamuhla. Ungasebenzisa izinguquko ze-CSS ukuze wenze izithombe zishintshe uma zikhishwa ngaphezulu, noma zichofoziwe, noma ngemva nje kwesikhathi.

Ukusebenzisa izithombe njengemvelaphi

I-CSS yenza kube lula ukudala izizinda ezifingqiwe ngezithombe zakho.

Ungangeza izizinda kuwo wonke ikhasi noma nje isici esithile. Kulula ukwakha isithombe sangemuva ekhasini kanye nomfanekiso wesithombe sangemuva:

umzimba {
isithombe sangemuva: i-url (isizinda sangemuva);
}}

Shintsha umkhethi womzimba kwisici esithile ekhasini ukuze ubeke imvelaphi engxenyeni eyodwa kuphela.

Enye into enhle ongayenza ngemifanekiso yakha isithombe sangemuva esingaphequluli nalo lonke ikhasi - njenge-watermark. Usebenzisa nje isinamathiselo sangemuva yesitayela: ifakwe; kanye nesithombe sakho sangemuva. Ezinye izinketho zezizinda zakho zihlanganisa ukuzenza zibe tile nje ngokuzenzekelayo noma ngokuzenzekelayo besebenzisa impahla ephindaphindiwe-ephinda.

Bhala ngemuva-phinda: phinda-x; ukukhipha isithombe ngokuzungezile nangemuva-phinda: phinda-y; ukuthungula ngokuqondile. Futhi ungabeka isithombe sakho sangemuva ngesakhiwo se-background-position.

Futhi i-CSS3 inezela izitayela ezengeziwe zezizinda zakho. Ungakwazi ukwelula izithombe zakho ukuze uvumelane noma yisiphi isizinda sangasayizi noma usethe isithombe sangemuva ukulinganisa ngobukhulu bewindi . Ungashintsha isikhundla bese uqhafaza isithombe sangemuva. Kodwa enye yezinto ezinhle kakhulu nge-CSS3 wukuthi manje ungakwazi ukubeka izithombe eziningi ezingemuva ukuze udale imiphumela engakahle kakhulu.

I-HTML5 isiza isitayela sezithombe

Isici se-FIGURE ku-HTML5 kufanele sibekwe kuzungeze noma yiziphi izithombe ezingahlala zodwa ngaphakathi kwedokhumenti. Enye indlela yokucabanga ngayo ukuthi isithombe singabonakala esihlosweni, kufanele sibe ngaphakathi kwesici se-FIGURE. Ungasebenzisa leso sici nesici se-FIGCAPTION ukwengeza izitayela ezithombeni zakho.