Nika umdla wakho webhsayithi ngokubonakalayo kunye nemifanekiso engemifanekiso
Iifoto ziyinxalenye ebalulekileyo yokuyila iwebhusayithi. Oku kuquka ukusetyenziswa kwemifanekiso yangemvelaphi. Le yimifanekiso nemifanekiso esetyenziswa emva kweendawo zekhasi ngokuchasene nemifanekiso evezwa njengenxalenye yamaphepha omxholo. Le mifanekiso yangemvelaphi inokuyifaka umdla kumboniso kwiphepha kwaye ikuncede ufezekise umboniso obonakalayo onokuwukhangela kwiphepha.
Ukuba uqala ukusebenza nemifanekiso engemvelaphi, ngokuqinisekileyo uya kusebenza kwimeko apho ufuna umfanekiso ulande ukuze ulungele iphepha.
Oku kunjalo ngokukodwa kwiiwebhusayithi eziphendulayo ezithunyelwa kwiinkalo ezahlukeneyo zobukhulu kunye nobukhulu besikrini .
Lo mnqweno wokwelula umfanekiso wesigcawu ngumnqweno oqhelekileyo kubaqulunqi bewebhu kuba akusiyo yonke imifanekiso ifanelekile kwi-website. Endaweni yokubeka ubungakanani obuyiyo, ukusula umfanekiso uvumela ukuba uguqule ukulungelelanisa nekhasi kungakhathaliseki ukuba ububanzi okanye unqamle iwindow ye-browser .
Indlela eyona ndlela yokululaza umfanekiso ukuhambelana nemvelaphi yephepha kukusebenzisa ipropati yeCSS3 , ngobukhulu bemvelaphi. Nasi umzekelo osebenzisa umfanekiso wesigcawu somzimba wephepha kwaye ubeka ubungakanani kwi-100% ukwenzela ukuba ihlale ilula ukuze ifanelwe isikrini.
umzimba {
imvelaphi: url (bgimage.jpg) ayikho kwakhona;
ubungakanani bemvelaphi: 100%;
}
Ngokutsho kwe-caniuse.com, le propati isebenza kwi-IE 9+, i-Firefox 4+, i-Opera 10.5+, i-Safari 5+, i-Chrome 10.5+, nakuzo zonke izikhangeli ezihamba phambili. Oku kukubandakanya kuzo zonke iiphequluli zanamhlanje ezikhoyo, oku kuthetha ukuba kufuneka usebenzise le propati ngaphandle koyiko lokuba ayiyi kusebenza kwisikrini somntu.
Ukufakela Imvelaphi edibeneyo kwi-Browser Browsers
Akunakwenzeka ukuba uya kufuneka ukuxhasa zonke iiphequluli ezindala kune-IE9, kodwa makhe sicinge ukuba unenkxalabo yokuba i-IE8 ayixhasi le propati. Ngaloo mzekelo, unokwenza ubuqhetseba imvelaphi. Kwaye ungasebenzisa i- prefixes ye- browser ye-Firefox 3.6 (-moz-background-size) kunye ne-Opera 10.0 (-o-background-size).
Indlela elula ukuyifaka umfanekiso wesitratxu osileyo ukuwulula kulo lonke iphepha. Emva koko awupheli ngesithuba esongezelelweyo okanye kufuneka ukhathazeke ukuba isicatshulwa sakho sifana kwindawo edibeneyo. Nantsi indlela yokwenza ngayo:
id = "bg" />
- Okokuqala, qiniseka ukuba zonke iiphequluli zinokuphakama kwe-100%, iimitha ezi-0, kunye ne-0 padding kwi-HTML BODY elements. Beka ezi zinto ngentloko yexwebhu lakho le-HTML:
- Yongeza umfanekiso ofuna ukuba yimvelaphi njengenxalenye yokuqala yephepha lewebhu, kwaye unike id id "bg":
- Beka umfanekiso wesiqhelo ukuze uzinze phezulu kunye nokhohlo kwaye u-100% ububanzi kunye no-100% ukuphakama. Yongeza oku kwiphepha lakho lesitayela:
img # bg {
isikhundla:
phezulu: 0;
sekhohlo: 0;
ububanzi: 100%;
ubude: 100%;
} - Yongeza wonke umxholo wakho kwiphepha langaphakathi kwinto ye-DIV ene-id ye "umxholo". Yongeza iDIV ngaphantsi komfanekiso:
Qaphela: kunomdla ukujonga iphepha lakho ngoku. Umfanekiso kufuneka ubonwe, kodwa umxholo wakho ulahlekile ngokupheleleyo. Ngoba? Ngenxa yokuba imvelaphi imvelaphi eyi-100% ukuphakama, kwaye isahluko somxholo sisemva komfanekiso ekuhambeni komqulu - ezininzi iibrowser aziyi kubonisa.Yonke into enomxholo apha - kuquka iintloko, imihlathi, njl.
- Beka umxholo wakho ukwenzela ukuba inxulumene kwaye ine -index ye-1. Oku kuza kuphakamisa ngaphezu komfanekiso wemvelaphi kwimigangatho ehambelana neziphequluli. Yongeza oku kwiphepha lakho lesitayela:
#intetho {
isikhundla: isihlobo;
z-index: 1;
}
- Kodwa awukwenziwanga. I-Internet Explorer 6 ayikho imilinganiselo ehambelanayo kwaye isenayo ingxaki. Kukho iindlela ezininzi zokufihla i-CSS kuyo yonke ikhupheli kodwa i-IE6, kodwa elula (kunye nobuncinci kubangele ezinye iingxaki) kukusebenzisa imibono enemiqathango. Faka ezi zilandelayo emva kwefayile yefayile kwihloko yombhalo wakho:
- Ngaphakathi lwamazwana aqakathekileyo, kongeza elinye ishidi lesitayela ngeendlela ezithile ukuze u-IE 6 udlale kakuhle:
- Qinisekisa ukuvavanya kwi-IE 7 kunye ne-IE 8. Kufuneka ulungelelanise izimvo ukuze uzixhase kwakhona. Nangona kunjalo, kusebenze xa ndivavanya.
Kulungile - oku kuvunyelwe ukuba KUYISWA. Iindawo ezimbalwa kakhulu kufuneka zixhase i-IE 7 okanye 8, kwakhona ngaphantsi kwe-IE6!
Ngaloo ndlela, le ndlela inqabile kwaye mhlawumbi ayimfuneko kuwe. Ndiyishiya apha ngaphezulu njengomzekelo wokufuna ukwazi ukuba izinto ezinzima kunzima kangakanani ngaphambi kokuba zonke iziphequluli zethu zidlale kakuhle!
Ukufakela umfanekiso wesigxina osiweyo kwiNdawo encinane
Ungasebenzisa ubuchule obufanayo ukufakela umfanekiso osilekileyo kwi-DIV okanye enye into kwiphepha lakho lewebhu. Oku kunzima kakhulu njengoko kufuneka usebenzise indawo epheleleyo okanye unemiba engaqhelekanga yokwabelana kwezinye iindawo zephepha lakho.
- Beka umfanekiso kwiphepha endifuna ukuyisebenzisa njengemvelaphi.
- Kwiphepha lesitayela, setha ububanzi kunye nokuphakama komfanekiso. Qaphela, ungasebenzisa ipesenteji ngobubanzi okanye ubude, kodwa ndibona kulula ukulungelelanisa nexabiso elide lokuphakama.
img # bg {
ububanzi: 20em;
ukuphakama: 30em;
} - Beka umxholo wakho kwi-div kunye nomxholo othi "umxholo" njengoko senze ngasentla:
Yonke into ekhoyo apha
- Isitayela somxholo we-div ube nobubanzi obufanayo kunye nokuphakama njengomfanekiso ongasemva:
div # okuqukethwe {
ububanzi: 20em;
ukuphakama: 30em;
} - Emva koko misa umxholo ukuya phezulu ukuya kumfanekiso. Ngoko ukuba umfanekiso wakho u-30m uya kuba nesitayela esiphambili: -30; Ungalibali ukubeka i-index ye-1 kwimixholo.
#intetho {
isikhundla: isihlobo;
phezulu: -30;
z-index: 1;
ububanzi: 20em;
ukuphakama: 30em;
} - Bese ukongeza kwi-z-index ye--1 kubasebenzisi be-IE 6, njengoko wenza ngasentla:
Kwakhona, kunye nobukhulu bemvelaphi ekuncedayo kwisibhajethi esibanzi ngoku senzayo, le ndlela inokuba yinto engeyomfuneko kwaye ihanjiswe njengemveliso yexesha elithile. Ukuba unqwenela ukusebenzisa le ndlela, qi niqiniseke ukuba uvavanya oku kwiphequluli ezininzi njengoko unako.
Kwaye ukuba umxholo wakho utshintsha ubungakanani, kuya kufuneka utshintshe ubungakanani besitya sakho kunye nomfanekiso wesiqalo, ngaphandle koko, uya kuphelisa ngeziphumo ezingaqhelekanga.