Kugwiritsa ntchito CSS ndi Zithunzi

Sinthani Zithunzi Zanu ndipo Gwiritsani Ntchito Zithunzi M'masita

Anthu ambiri amagwiritsa ntchito CSS kusintha malemba, kusintha maonekedwe, mtundu, kukula ndi zina. Koma chinthu chimodzi chimene anthu ambiri amaiwala nthawi zambiri ndi chakuti mukhoza kugwiritsa ntchito CSS ndi mafano.

Kusintha Chithunzi Chake

CSS ikukuthandizani kusintha momwe chithunzi chikuwonetsera patsamba. Izi zikhonza kukhala zothandiza kwambiri kusunga masamba anu mosagwirizana. Mwa kuyika mafashoni pazithunzi zonse, mumayang'ana maonekedwe anu pazithunzi. Zina mwa zinthu zomwe mungachite:

Kupereka chithunzi chanu malire ndi malo abwino oti muyambe. Koma muyenera kulingalira zambiri kuposa malire - ganizirani za m'mphepete mwa fano lanu ndikusintha mazenera ndi padding . Chithunzi chokhala ndi malire ofiira chakuda chikuwoneka bwino, koma kuwonjezera podding pakati pa malire ndi chithunzi chikhoza kuwoneka bwinoko.

img {
malire: 1px wakuda wakuda;
padding: 5px;
}}

Ndibwino kuti nthawi zonse muzigwirizanitsa zithunzi zosakongoletsera , ngati n'kotheka. Koma pamene mutero, kumbukirani kuti mazenera ambiri amatha malire amitundu yozungulira fanolo. Ngakhale mutagwiritsa ntchito ndondomekoyi pamwamba kuti musinthe malire, chiyanjano chidzapitirira ngati mutachotsa kapena kusintha malire pachigwirizano. Kuti muchite izi muyenera kugwiritsa ntchito malamulo a ana a CSS kuchotsa kapena kusintha malire pafupi ndi zithunzi zogwirizana:

img> a {
malire: palibe;
}}

Mukhozanso kugwiritsa ntchito CSS kusintha kapena kuyika kutalika ndi kupukuta kwa zithunzi zanu. Ngakhale sizomwe mungagwiritse ntchito msakatuliyo kuti musinthe kukula kwazithunzi chifukwa cha kufulumira kwapulogalamu, akukula bwino pazithunzi zotsalira kuti ziwoneke bwino. Ndipo ndi CSS mungathe kuyika mafano anu onse kuti akhale ozungulira kapena kutalika kapena kuyika miyeso kuti ikhale yogwirizana ndi chidebecho.

Kumbukirani, pamene mukukhazikitsa zithunzi, kuti mupeze zotsatira zabwino, muyenera kungosintha chinthu chimodzi - kutalika kapena m'lifupi. Izi zidzasokoneza kuti fanolo limasunga chiƔerengero chake, ndipo kotero silikuwoneka chachilendo. Ikani mtengo wina ku auto kapena mutuluke kuti muwuze msakatuliyo kuti asunge chiwerengero chofanana.

img {
m'lifupi: 50%;
kutalika: auto;
}}

CSS3 imapereka njira yothetsera vuto ili ndi zatsopano zatsopano zomwe zili zoyenera komanso malo omwe ali nawo. Ndi malo awa mudzatha kufotokoza kutalika kwake kwa fano ndi m'lifupi ndi momwe chiwerengero cha chiwerengerocho chiyenera kuchitidwa. Izi zingapangitse zotsatira zamakalata zozungulira zithunzi zanu kapena zokopa kuti fanolo likhale lofanana ndi kukula kofunikira.

Ngakhale kuti CSS3 zosagwirizana ndi malo osankhidwa sizinali zothandizidwa panthawiyi, palinso katundu wina wa CSS3 amene amathandizidwa bwino m'masakono ambiri amakono omwe mungagwiritse ntchito kusintha zithunzi zanu. Zinthu monga mthunzi wamdima, makomo oyandikana, ndi kusintha kwasinthasintha, skew, kapena kusuntha zithunzi zanu zonse zimagwira ntchito pakalipano masiku ano. Mutha kugwiritsa ntchito kusintha kwa CSS kuti zojambula zisinthe pamene zikulumikizidwa, kapena zitsekedwa, kapena patapita nthawi.

Kugwiritsa Ntchito Mafanizo Monga Zomwe Zimayambira

CSS zimapangitsa kuti mukhale zosavuta kupanga zojambula zokongola ndi zithunzi zanu.

Mukhoza kuwonjezera maziko kumapeto kwa tsamba lonse kapena ku chinthu china. N'zosavuta kupanga chithunzi chakumbuyo pa tsamba ndi katundu wam'thunzi:

thupi {
Chithunzi chakumbuyo: url (background.jpg);
}}

Sinthani wosankha thupi ku chinthu china pa tsamba kuti muike maziko pa chinthu chimodzi chokha.

Chinthu china chosangalatsa chimene mungachite ndi mafano ndikulenga chithunzi chakumbuyo chomwe sichikupukuta ndi tsamba lonse - ngati watermark. Mukungogwiritsira ntchito mawonekedwe a maziko: osakhazikika; pamodzi ndi chithunzi chanu chakumbuyo. Zosankha zina pazochitika zanu zimaphatikizapo kuziyika pang'onopang'ono kapena pamtundu pogwiritsa ntchito katundu wobwereza.

Lembani kumbuyo-kubwereza: kubwereza-x; Kujambula chithunzi kumbuyo ndi kumbuyo-kubwereza: kubwereza-y; kuti apirire mopota. Ndipo mukhoza kuyika chithunzi chanu chakumbuyo ndi malo apamwamba.

Ndipo CSS3 imaphatikizapo mafashoni ambiri a mbiri yanu. Mukhoza kutambasula zithunzi zanu kuti zigwirizane ndi msinkhu uliwonse kapena kuyika chithunzi chakumbuyo kuti muyese ndi kukula kwawindo . Mukhoza kusintha malo ndikujambula chithunzichi. Koma chimodzi mwa zinthu zabwino kwambiri za CSS3 ndi chakuti tsopano mutha kusanjikiza zithunzi zambiri kuti mutenge zotsatira zovuta kwambiri.

HTML5 Imathandiza Zithunzi Zamakono

Chiganizo cha HTML5 chiyenera kuikidwa pazithunzi zilizonse zomwe zingakhoze kuyima zokha mkati mwa chilembacho. Njira imodzi yoganizira izi ndizomwe fano likhoza kuwoneka pazowonjezereka, ndipo liyenera kukhala mkati mwa chiganizo. Mutha kugwiritsa ntchito chinthucho ndi chinthu cha FIGCAPTION kuti muwonjezere mafashoni kwa zithunzi zanu.