Stíl Do Íomhánna agus Úsáid Íomhánna i Stíleanna
Úsáideann a lán daoine CSS chun téacs a choigeartú, ag athrú an chló, an dath, an méid agus níos mó. Ach rud amháin a chuireann go leor daoine dearmad go minic is féidir leat CSS a úsáid le híomhánna chomh maith.
Ag Athrú an Íomhá Féin
Ceadaíonn CSS duit coigeartú a dhéanamh ar an gcaoi a léiríonn an íomhá ar an leathanach. D'fhéadfadh sé seo a bheith i ndáiríre úsáideach chun do leathanaigh a choinneáil comhsheasmhach. Trí stíleanna a leagan síos ar na híomhánna uile, cruthaíonn tú cuma caighdeánach do íomhánna. Cuid de na rudaí is féidir leat a dhéanamh:
- Cuir teorainn nó imlíne ar fud na n-íomhánna
- Bain an teorainn daite ar fud íomhánna nasctha
- Ag luchtú leithead agus / nó airde na n-íomhánna
- Cuir scáth titim isteach
- Rothlaigh an íomhá
- Athraigh na stíleanna nuair a bhíonn an íomhá os cionn
Is áit iontach é tús a thabhairt do íomhá a thosú. Ach ba cheart duit smaoineamh ar níos mó ná an teorainn - smaoineamh ar imeall iomlán d'íomhá agus coigeartú a dhéanamh ar na corrlaigh agus an stuáil chomh maith. Breathnaíonn íomhá le teorainn tanaí dubh go deas, ach cuireann sé roinnt greamaitheacha idir an teorainn agus is féidir leis an íomhá breathnú níos fearr.
img {
teorainn: 1px soladach dubh;
stuáil: 5px;
}
Is dea-smaoineamh íomhánna neamh-ornáideacha a nascadh , nuair is féidir. Ach nuair a dhéanann tú, cuimhnigh go gcuireann an chuid is mó de na brabhsálaithe teorainn daite ar fud an íomhá. Fiú má úsáideann tú an cód thuas chun an teorainn a athrú, déanfaidh an nasc seo a shárú mura gcuireann tú an teorainn ar an nasc chomh maith. Chun seo a dhéanamh ba chóir duit riail leanbh CSS a úsáid chun an teorainn a bhaineann le híomhánna nasctha a bhaint nó a athrú:
img> a {
teorainn: none;
}
Is féidir leat CSS a úsáid freisin chun airde agus leithead d'íomhánna a athrú nó a shocrú. Cé nach smaoineamh iontach é an brabhsálaí a úsáid chun méideanna íomhá a choigeartú mar gheall ar luasanna íoslódála, tá siad ag dul i bhfad níos fearr ag athrú íomhánna ionas go bhfeiceann siad go maith fós. Agus le CSS is féidir leat do chuid íomhánna a leagan síos go léir leithead nó airde caighdeánach nó fiú na gnéithe a leagan síos i gcoibhneas leis an gcoimeádán.
Cuimhnigh, nuair a athraíonn tú íomhánna, chun na torthaí is fearr, níor cheart ach gné amháin a athrú - an airde nó an leithead. Beidh sé deimhin leis seo go gcoimeádann an íomhá a gcóimheas gné, agus mar sin ní fheiceann sé aisteach. Socraigh an luach eile chun uathoibríoch nó é a fhágáil amach chun an bhrabhsálaí a insint chun an cóimheas gné a choinneáil comhsheasmhach.
img {
leithead: 50%;
airde: uathoibríoch;
}
Soláthraíonn CSS3 réiteach ar an bhfadhb seo leis na hairíonna nua a bhaineann le cuspóir-oiriúnach agus seasamh réadmhaoine. Leis na hairíonna seo, beidh tú in ann an airde agus an leithead íomhá chruinn a shainmhíniú agus an chaoi ar chóir an cóimheas gné a láimhseáil. D'fhéadfadh sé seo éifeachtaí boscaí litreacha a chruthú timpeall d'íomhánna nó cropping chun an íomhá a fháil chun a bheith oiriúnach sa mhéid is gá.
Cé nach dtugtar tacaíocht forleathan leis na hairíonna réad-oiriúnacha agus seasamh-réadacha CSS3 go fóill, tá airíonna eile CSS3 ann a bhfuil tacaíocht mhaith acu sna brabhsálaithe is nua-aimseartha is féidir leat a úsáid chun d'íomhánna a mhodhnú. Tá rudaí cosúil le scáthanna titim, coirnéil chothromaithe, agus claochladáin chun na híomhánna a rothlú, a ghreamú, nó a aistriú go léir ag obair anois i bhformhór na mbrabhsálaithe nua-aimseartha. Ansin, is féidir leat aistrithe CSS a úsáid chun na híomhánna a athrú nuair a tharlaíonn siad, nó cliceáil, nó díreach tar éis tréimhse ama.
Ag baint úsáide as Íomhánna mar Cúlraí
Déanann CSS éasca cúlraí mhaisiúla a chruthú le d'íomhánna.
Is féidir leat cúlraí a chur leis an leathanach ar fad nó le heilimint shonrach amháin. Tá sé éasca íomhá cúlra a chruthú ar an leathanach leis an maoin chúl-íomhá:
comhlacht {
background-image: url (background.jpg);
}
Athraigh an roghnóir comhlacht ar eilimint shonrach ar an leathanach chun an cúlra a chur ar eilimint amháin.
Rud eile is féidir leat a dhéanamh le híomhánna ná íomhá cúlra a chruthú nach scrollaíonn an chuid eile den leathanach - cosúil le huisce uisce. Úsáid tú an stíl cúlra-ceangaltán: seasta; chomh maith le d'íomhá cúlra. I measc na roghanna eile a bhaineann le do chúlraí áirítear tíl a dhéanamh ach go cothrománach nó go hingearach ag baint úsáide as an maoin chúlra-athuair.
Scríobh cúl-athuair: athuair-x; chun an íomhá a fhíorú go cothrománach agus ar chúlra: athuair-y; le tíl go hingearach. Agus is féidir leat d'íomhá cúlra a sheasamh leis an maoin seasamh cúlra.
Agus cuireann CSS3 stíleanna níos mó le do chúlraí chomh maith. Is féidir leat do chuid íomhánna a shíneadh chun aon chúlra méid a d'oirfeadh nó an íomhá cúlra a shocrú le scála le méid na fuinneoige . Is féidir leat an seasamh a athrú agus an íomhá cúlra a ghearradh ansin. Ach is é ceann de na rudaí is fearr faoi CSS3 gur féidir leat íomhánna cúlra éagsúla a shocrú anois chun éifeachtaí níos déine a chruthú.
Cuidíonn HTML5 Íomhánna Stíl
Ba cheart an eilimint FIGIÚR i HTML5 a chur ar fud aon íomhánna ar féidir leo a bheith ina n-aonar laistigh den doiciméad. Bealach amháin chun smaoineamh air ná má d'fhéadfadh an íomhá a bheith le feiceáil in aguisín, ansin ba chóir go mbeadh sé taobh istigh den eilimint FIGIÚR. Ansin, is féidir leat an eilimint sin a úsáid agus an eilimint FIGCAPTION chun stíleanna a chur le do íomhánna.