Ejiji Images gị na Jiri Images na Styles
Ọtụtụ ndị na-eji CSS dozie ederede, na-agbanwe agbanwe na font, agba, nha na ndị ọzọ. Ma otu ihe ọtụtụ ndị na-echefukarị bụ na ị nwere ike iji CSS na ihe oyiyi.
Gbanwee Foto n'onwe ya
CSS na-enye gị ohere ịhazigharị otú oyiyi ahụ si egosipụta na ibe. Nke a nwere ike ịba uru maka idebe akwụkwọ gị. Site na ịmepụta n'ụdị na ihe oyiyi niile, ị mepụtara ọkọlọtọ ịchọ ihe oyiyi gị. Ụfọdụ n'ime ihe ndị ị nwere ike ime:
- Tinye ókè ma ọ bụ eserese gburugburu ihe oyiyi
- Wepu ihe odide agba gburugburu oyiyi ndi ozo
- Ịgbanwe obosara na / ma ọ bụ ịdị elu nke ihe oyiyi ahụ
- Tinye onyinyo ndo
- Gbanwee onyinyo ahụ
- Gbanwee ụdị ndị ahụ mgbe etinyere onyinyo ahụ
Inye onyinyo gị bụ ókèala bụ ebe dị mma ịmalite. Ma, ị ga-atụle ihe karịrị ókèala - chee echiche banyere akụkụ dum nke onyinyo gị ma gbanwee akụkụ ma ọ bụ mgbochi . Ihe oyiyi nke nwere oke ogbe na-acha anya, ma na-agbakwụnye ụfọdụ ihe mgbochi n'etiti ókèala na onyinyo ahụ nwere ike ile anya.
img {
ókè: 1px siri ike;
mpe akwa: 5px;
}
Ọ bụ ihe dị mma iji jikọta ihe oyiyi ndị anaghị achọ , mgbe o kwere omume. Ma mgbe ị na-eme, cheta na ọtụtụ ndị na-eme nchọgharị na-agbakwunye ókèala acha gburugburu oyiyi ahụ. Ọbụna ma ọ bụrụ na ị na-eji koodu ahụ dị n'elu iji gbanwee ókèala, njikọ ahụ ga-eme ka ọ bụrụ na ị wepụ ma ọ bụ gbanwee ókèala na njikọ ahụ. Iji mee nke a, ị ga-eji ọchịchị CSS na-achị iji wepu ma ọ bụ gbanwee ókè gburugburu ihe oyiyi ejikọtara:
img> a {
ókè-ala: ọ dighi;
}
I nwekwara ike iji CSS gbanwee ma ọ bụ seto ogo na obosara nke ihe oyiyi gị. Ọ bụ ezie na ọ bụghị nnukwu echiche iji ihe nchọgharị iji gbanwee nha nha n'ihi nbudata ngwa ngwa, ha na-akawanye mma n'ịmegharị ihe oyiyi ka ha wee dị mma. Na CSS ị nwere ike ịtọ ihe oyiyi gị niile ka obosara ma ọ bụ ịdị elu ma ọ bụ ọbụna setịpụrụ akụkụ iji bido na akpa ahụ.
Cheta, mgbe ị na-eweghachi ihe oyiyi, maka nsonaazụ kacha mma, ị ga-emerịrị otu akụkụ - elu ma ọ bụ obosara. Nke a ga - eme ka onyinyo ahụ bụrụ akụkụ nke ya, ya mere, ọ bụghị ihe ijuanya. Tọọ ihe ọzọ bara uru na akpaaka ma ọ bụ hapụ ya ka ị gwa ihe nchọgharị ahụ ka ịchekwa akụkụ ahụ.
img {
obosara: 50%;
elu: akpaaka;
}
CSS3 na-enye ihe ngwọta maka nsogbu a na ihe ọhụrụ ejighị ihe-na-adaba na ọnọdụ-ihe. Na njirimara ndị a, ị ga-enwe ike ịkọwa ihe oyiyi dị elu na obosara na otu akụkụ kwesịrị isi edozi ya. Nke a nwere ike ịmepụta mmetụta ntinye akwụkwọ ozi gburugburu ihe oyiyi gị ma ọ bụ iji mee ka onyinyo ahụ dabara na nha chọrọ.
Ọ bụ ezie na a kwadobeghị ihe ndị CSS3 na-ejikọta na ihe ndị na-ejighị ihe ọ bụla, e nwere ihe ndị ọzọ CSS3 na-akwado nke ọma na ọtụtụ ihe nchọgharị weebụ nke oge a nke ị nwere ike iji gbanwee ihe oyiyi gị. Ihe dị ka idebe onyinyo, akụkụ gbara gburugburu, na mgbanwe iji gbanwee, skew, ma ọ bụ mee ka ihe oyiyi gị rụọ ọrụ ugbu a n'ọtụtụ ihe nchọgharị weebụ. Ị nwere ike iji CSS transitions iji mee ka ihe oyiyi ahụ gbanwee ma ọ bụrụ na ị na-ekpuchi, ma ọ bụ pịa, ma ọ bụ mgbe oge ụfọdụ gasịrị.
Iji Images dị ka ndabere
CSS na - eme ka ọ dị mfe ịmepụta ihe ngosi gị na ihe oyiyi gị.
Ịnwere ike ịgbakwunye agbakwunyere na ibe ma ọ bụ naanị otu mmewere. Ọ dị mfe ịmepụta ndabere foto dị na ibe ahụ na ihe oyiyi ndabere:
ahụ {
ndabere-oyiyi: url (background.jpg);
}
Gbanwee onye na-ahọpụta ndị mmadụ na otu mmemme dị na ibe ahụ iji tinye ndabere na otu ihe.
Ihe ọzọ na-atọ ụtọ ị nwere ike ime na ihe oyiyi na-emepụta ihe ndabere nke na-enweghị mpịakọta na akụkụ nke ọzọ - dị ka mmiri. Naanị ị na-eji ụdị mgbakwunye agbatị: edozi; tinyere onyinyo gị. Nhọrọ ndị ọzọ maka nzụlite gị gụnyere ịmepụta ha na-eme ihe na-emegharị ma ọ bụ na-eji ihe ndabere azụghachi.
Dee edemede-ikwughachi: megharịa-x; iji tichaa onyinyo ahụ na nzụlite-ikwugharị: megharịa-y; ị ga-esi na-aga. Ịnwere ike ịhazi ọdịdị ndabere gị na ihe onwunwe nke ndabere.
CSS3 na-agbakwụnyekwa ụdị ndị ọzọ maka nzụlite gị. Ị nwere ike gbatịa ihe oyiyi gị iji tụnyere nhazi ọ bụla ma ọ bụ setịpụ ihe oyiyi dị na ya ka ọ dị elu na window . Ị nwere ike ịgbanwe ọnọdụ ahụ wee họrọ onyinyo ndabere. Mana otu n'ime ihe kachasị mma banyere CSS3 bụ na ị nwere ike ịdebe ihe ndabere dị iche iche ugbu a iji mepụta ọbụna mmetụta dị mgbagwoju anya.
HTML5 Na-enyere Style Images
AHỤ ihe dị na HTML5 kwesịrị itinye na ihe oyiyi ọ bụla nwere ike iguzo naanị n'ime akwụkwọ. Otu ụzọ iche echiche banyere ya bụ ma ọ bụrụ na eserese ahụ nwere ike ịpụta na ntinye akwụkwọ, mgbe ahụ, ọ ga-adị n'ime ihe ngosi ahụ. Ị nwere ike iji ihe ahụ na ihe ngosi FIGCAPTION gbakwunye n'ụdị na ihe oyiyi gị.