Tabhair spéis amhairc do shuíomh gréasáin le grafaicí cúlra
Is cuid thábhachtach de dhearaí láithreán gréasáin tarraingteach iad na híomhánna. Áirítear leis seo úsáid íomhánna cúlra. Seo iad na híomhánna agus na grafaicí a úsáidtear taobh thiar de limistéir leathanach seachas na híomhánna a chuirtear i láthair mar chuid de na leathanaigh ábhar. Is féidir leis na híomhánna cúlra seo spéis amhairc a chur ar leathanach agus cabhrú leat an dearadh amhairc a bhaint amach gur féidir leat a bheith á lorg ar leathanach.
Má thosaíonn tú ag obair le híomhánna cúlra, gan amhras beidh tú ag dul isteach sa chás inar mian leat íomhá a shíneadh chun an leathanach a oiriúnú.
Tá sé seo fíor go háirithe do shuíomhanna gréasáin sofhreagracha atá á seachadadh ar raon leathan feistí agus méideanna scáileáin .
Is fonn an-choitianta do dhearthóirí gréasáin é an dúil seo chun íomhá cúlra a shíneadh toisc nach n-oireann gach íomhá i spás ar shuíomh gréasáin. In áit méid socraithe a leagan síos, is féidir leis an íomhá a shíneadh a chumasú chun an leathanach a shocrú, is cuma cé chomh leathan nó is cúng é an fhuinneog an bhrabhsálaí .
Is é an bealach is fearr chun íomhá a shíneadh le cúlra leathanach a úsáid ná maoin CSS3 a úsáid, ar mhaithe le cúlra. Seo sampla a úsáideann íomhá cúlra do chorp leathanach agus a leagann an méid go 100% ionas go mbeidh sé i gcónaí ag síneadh chun an scáileán a oiriúnú.
comhlacht {
cúlra: url (bgimage.jpg) gan athuair;
méid cúlra: 100%;
}
De réir caniuse.com, oibríonn an mhaoin seo i IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, agus ar na príomhbhrabhsálaithe móra. Clúdaíonn sé seo duit na brabhsálaithe nua-aimseartha atá ar fáil inniu, rud a chiallaíonn gur cheart duit an mhaoin seo a úsáid gan eagla nach n-oibreoidh sé ar scáileán duine.
Cúlra Leagtha i Brabhsálaithe Scothaosta
Ní dócha go gcaithfeá tacaíocht a thabhairt do bhrabhsálaithe níos sine ná IE9, ach glacadh leis go bhfuil tú buartha nach dtacaíonn IE8 leis an maoin seo. Sa chás sin, is féidir leat cúlra sínte a fhíorú. Agus is féidir leat réamhshuimíní an bhrabhsálaí a úsáid le haghaidh Firefox 3.6 (-moz-background-size) agus Opera 10.0 (-o-background-size).
Is é an bealach is éasca íomhá cúlra sínte a fhíorú ná é a shíneadh ar fud an leathanaigh ar fad. Ansin, ní chríochnaíonn tú spás breise nó ní mór duit a bheith buartha go n-oireann do théacs sa limistéar sínte. Seo conas é a dhéanamh:
id = "bg" />
- Gcéad dul síos, déan cinnte go bhfuil airde 100%, 0 imeall, agus 0 greamaithe ar na heilimintí COMHLACHTA HTML agus HTML ag gach brabhsálaí. Cuir an méid seo a leanas i gceann do dhoiciméid HTML:
- Cuir an íomhá ar mian leat a bheith mar chúlra mar an chéad eilimint den leathanach gréasáin, agus tabhair an id "bg" leis:
- Seasigh an íomhá cúlra ionas go mbeidh sé socraithe ag an mbarr agus ar chlé agus tá 100% ar leithead agus 100% ar airde. Cuir é seo le do bhileog stíl:
img # bg {
seasamh: seasta;
barr: 0;
clé: 0;
leithead: 100%;
airde: 100%;
} - Cuir do chuid ábhar go léir leis an leathanach taobh istigh de eilimint DIV le id "ábhar". Cuir an DIV thíos an íomhá:
Tabhair faoi deara: tá sé suimiúil breathnú ar do leathanach anois. Ba chóir an íomhá a thaispeáint go síneadh amach, ach tá d'ábhar ar iarraidh go hiomlán. Cén fáth? Toisc go bhfuil an íomhá cúlra 100% ar airde, agus tá an roinn ábhar tar éis an íomhá i sreabhadh an doiciméid - ní thaispeánfaidh an chuid is mó de na brabhsálaithe é.Gach ábhar anseo - lena n-áirítear ceannteidil, míreanna, etc.
- Seasamh ar d'ábhar ionas go mbeidh sé coibhneasta agus tá z-innéacs de 1. Tabharfaidh sé seo os cionn an íomhá cúlra i mbrabhsálaithe comhlíontacha caighdeáin. Cuir é seo le do bhileog stíl:
#content {
seasamh: coibhneasta;
z-innéacs: 1;
}
- Ach nach bhfuil tú déanta agat. Níl caighdeáin comhlíonta ag Internet Explorer 6 agus tá roinnt fadhbanna fós ann. Tá go leor bealaí ann an CSS a cheilt ó gach brabhsálaí ach IE6, ach is é tuairimí coinníollach a úsáid is éasca (agus is dócha go gcuirfí fadhbanna eile orthu). Cuir an méid seo a leanas i ndiaidh do bhileog stíleanna i gceann do dhoiciméid:
- Taobh istigh den trácht béim, cuir bileog stíl eile le roinnt stíleanna chun IE 6 a fháil deas a imirt:
- Bí cinnte go ndéanfaidh tú tástáil i IE 7 agus IE 8 chomh maith. B'fhéidir go gcaithfidh tú na tuairimí a choigeartú chun tacú leo chomh maith. Mar sin féin, d'oibrigh sé nuair a thástáil mé é.
OK - tá sé seo go hiontach le overkill FÁS. Ní mór mórán láithreáin tacú le IE 7 nó 8 níos mó, IE6 níos lú!
Mar sin, tá an cur chuige seo ar siúl agus is dócha nach gá duit. Fágann mé anseo níos mó mar mhúnla fiosracht maidir le cé mhéad rudaí níos deacra a bhí os comhair ár mbrabhsálaithe go léir chomh maithe le chéile!
Íomhá Cúlra Leagtha a Shéaladh Thar Spás Laghdaithe
Is féidir leat teicníc den chineál céanna a úsáid chun íomhá cúlra sínte a fhíorú thar DIV nó eilimint eile ar do leathanach gréasáin. Is beagán níos deacra é seo mar go gcaithfidh tú suíomh iomlán a úsáid nó ceisteanna spáis aisteach a bheith agat do chuid eile de do leathanach.
- Cuir an íomhá ar an leathanach gur mhaith liom a úsáid mar chúlra.
- Sa bhileog stíl, leagtar leithead agus airde don íomhá. Tabhair faoi deara, is féidir leat céatadáin a úsáid leithead nó airde, ach is féidir liom a choigeartú le fadluachanna don airde.
img # bg {
leithead: 20em;
airde: 30em;
} - Cuir do chuid ábhar i div leis an "ábhar" id mar a rinneamar thuas:
Gach ábhar duit anseo
- Stíl an t-ábhar div a bheith mar an leithead agus airde céanna mar an íomhá cúlra:
div # content {
leithead: 20em;
airde: 30em;
} - Ansin seasamh an t-ábhar suas go dtí an airde céanna leis an íomhá. Mar sin, má tá do íomhá 30em bheadh stíl barr agat: -30em; Ná déan dearmad z-innéacs 1 a chur ar an ábhar.
#content {
seasamh: coibhneasta;
barr: -30em;
z-innéacs: 1;
leithead: 20em;
airde: 30em;
} - Ansin cuir isteach z-innéacs de -1 d'úsáideoirí IE 6, mar a rinne tú thuas:
Arís, le méid cúlra ag baint taitnimh as an tacaíocht bhrabhsálaí leathanaigh anois, is dócha go mbeidh an cur chuige seo an-dóchúlacht agus go gcuirfear i láthair é mar tháirge de ré a bhí caite. Más mian leat an cur chuige seo a úsáid, bí cinnte go ndéanfaidh tú seo a thástáil i bhformhór brabhsálaithe is féidir leat.
Agus má athraíonn do ábhar méid, caithfidh tú méid do choimeádán agus d'íomhá cúlra a athrú, ar shlí eile, beidh torthaí aisteach ort.