Indlela Yokunqamula Isithombe Semuva Ukuze Ufake Ikhasi LeWebhu

Nika iwebhusayithi yakho isithakazelo esibukwayo ngehluzo zangemuva

Izithombe ziyingxenye ebalulekile yezinkampani ezikhangayo zewebhu. Lokhu kuhlanganisa ukusetshenziswa kwezithombe zangemuva. Lezi yizithombe namahluzo asetshenziselwa ngemuva kwekhasi elingaphambene nezithombe ezethulwa njengengxenye yamakhasi okuqukethwe. Lezi zithombe ezingemuva zingafaka isithakazelo esibukwayo ekhasini futhi zikusize ufinyelele ukuklama okubukwayo ongase ubheke ekhasini.

Uma uqala ukusebenza ngezithombe zangemuva, ngokuqinisekile uzongena esimweni lapho ufuna khona isithombe ukuze usule ukuze uvumelane nekhasi.

Lokhu kuyiqiniso ikakhulukazi kumawebhusayithi aphendulelayo ahanjiswa kumadivayisi amaningi nobukhulu bombukiso .

Lesi sifiso sokwelula isithombe sangemuva yisifiso esivamile kakhulu sabadwebi bewebhu ngoba akuwona wonke umfanekiso ohambisana nesikhala sewebhusayithi. Esikhundleni sokubeka usayizi ohleliwe, ukusula isithombe kusivumela ukuthi iguqule ukuvumelanisa nekhasi kungakhathaliseki ukuthi ibanzi noma isinciphisi iwindi lesiphequluli .

Indlela engcono kakhulu yokwelula isithombe ukuze uvumelane nesizinda sekhasi ukusebenzisa i- CSS3 impahla, ngesayizi sangemuva. Nasi isibonelo esisebenzisa isithombe sangemuva somzimba wekhasi futhi esibeka ubukhulu ku-100% ukuze sihlale sisolula ukuze sifane neskrini.

umzimba {
isizinda: url (bgimage.jpg) akukho-okuphinda;
Usayizi wangemuva: 100%;
}}

Ngokusho kwe-caniuse.com, le ndawo isebenza ku-IE 9+, Firefox 4+, i-Opera 10.5+, i-Safari 5+, i-Chrome 10.5+, nakuzo zonke iziphequluli ezihamba phambili zeselula. Lokhu kukuhlanganisa kuzo zonke iziphequluli zanamuhla ezitholakalayo, okusho ukuthi kufanele usebenzise le ndawo ngaphandle kokwesaba ukuthi ngeke isebenze esikrinini somuntu.

Ukubamba Isendla Esiqondisiwe Esipheqululini Esikhudlwana

Akungabazeki ukuthi uzodinga ukusekela noma yiziphi iziphequluli ezindala kune-IE9, kodwa ake sicabange ukuthi ukhathazekile ngokuthi i-IE8 ayisekeli le ndawo. Kulesi sibonelo, ungangena isizinda esiluliwe. Futhi ungasebenzisa izibikezelo zesiphequluli se-Firefox 3.6 (-moz-background-usayizi) no-Opera 10.0 (-o-background-usayizi).

Indlela elula yokufakela isithombe sangemuva esiluliwe ukukwelula kulo lonke ikhasi. Khona-ke awupheli isikhala esingeziwe noma kufanele ukhathazeke ngokuthi umbhalo wakho uhambisana nendawo eselulekile. Nansi indlela yokwenza ngayo:

id = "bg" />

1. Okokuqala, qinisekisa ukuthi zonke iziphequluli zinamaphesenti angu-100, ububanzi be-0, kanye ne-0 padding ezakhiweni ze-HTML ze-BODY. Beka okulandelayo ekhanda lencwadi yakho ye-HTML:

2. Engeza isithombe ofuna ukuba yisizinda njengengxenye yokuqala yekhasi lewebhu, bese unikeza id ye "bg":

3. Misa isithombe sangemuva ukuze sikhiwe phezulu nangesobunxele futhi singamaphesenti angu-100 ubukhulu futhi 100% ukuphakama. Engeza lokhu kwishidi lakho lesitayela:

   img # bg {
   isikhundla: fixed;
   phezulu: 0;
   kwesokunxele: 0;
   ububanzi: 100%;
   ukuphakama: 100%;
   }}

4. Engeza konke okuqukethwe kwakho ekhasini ngaphakathi kwento ye-DIV ene-id ye "okuqukethwe". Engeza i-DIV ngezansi kwesithombe:

   Yonke okuqukethwe kwakho lapha - kufaka phakathi izihloko, izigaba, njll.

   Qaphela: kuyathakazelisa ukubuka ikhasi lakho manje. Isithombe kufanele sibonise sithunyelwe, kodwa okuqukethwe kwakho kulahlekile ngokuphelele. Kungani? Ngoba isithombe sangemuva singu-100% ukuphakama, futhi ukuhlukaniswa kokuqukethwe kulandela isithombe ukugeleza kwedokhumenti - iziphequluli eziningi ngeke zibonise.
   
5. Misa okuqukethwe kwakho ukuze kuhlotshaniswe futhi kune- z-index ye-1. Lokhu kuzokuletha ngaphezu kwesithombe sangemuva kuziphequluli ezivumelanisiwe. Engeza lokhu kwishidi lakho lesitayela:

   #intent {
   isikhundla: isihlobo;
   z-index: 1;
   }}

1. Kodwa awukwenziwanga. I-Internet Explorer 6 ayizona izindinganiso ezihambisanayo futhi zinezinkinga ezithile. Kunezindlela eziningi zokufihla i-CSS kuzo zonke iziphequluli kodwa i-IE6, kodwa elula (futhi okungenani kungenzeka ukuthi ibangele ezinye izinkinga) ukusebenzisa imibono enemibandela. Beka okulandelayo ngemuva kwethebhulethi yezitayela zakho ekhanda lombhalo wakho:

2. Ngaphakathi kwamazwana aqanjiwe, engeza elinye ishidi lesitayela nezitayela ezithile ukuze uthole i-IE 6 ukudlala okuhle:

3. Qinisekisa ukuhlola ku-IE 7 naku-IE 8 futhi. Kungadingeka ulungise amazwana ukuze uwasekele futhi. Noma kunjalo, kusebenze uma ngiyivivinya.

Kulungile - lokhu kuvunyelwe ukuthi KUYAYENZEKA. Izingosi ezimbalwa kakhulu zidinga ukusekela i-IE 7 noma i-8, okungenani i-IE6!

Njengalokhu, le ndlela isuke ishicilelwe futhi kungenzeka ukuthi akudingekile kuwe. Ngiyishiya lapha ngaphezulu njengesibonelo sokufuna ukwazi ukuthi ziningi kangakanani izinto ezinzima ngaphambi kokuba zonke iziphequluli zethu zidlale kahle kakhulu!

Ukubamba isithombe sendawo esiluliwe phezu kwesikhala esincane

Ungasebenzisa inqubo efanayo ukukhohlisa isithombe sangemuva esilulekile ku-DIV noma esinye isici ekhasini lakho lewebhu. Lokhu kuyinkimbinkimbi encane njengoba kufanele usebenzise ukubeka okuphelele noma unenkinga engavamile yokuhlukanisa ezinye izingxenye zekhasi lakho.

1. Beka isithombe ekhasini engifuna ukuyisebenzisa njengemuva.

2. Esikhathini seshidi, setha ububanzi nokuphakama kwesithombe. Qaphela, ungasebenzisa amaphesenti ngobubanzi noma ukuphakama, kodwa ngithola kulula ukulungisa namagugu ubude bokuphakama.

   img # bg {
   ububanzi: 20m;
   ukuphakama: 30m;
   }}

3. Beka okuqukethwe kwakho ku-div nge-"okuqukethwe" ye-id njengoba senze ngenhla:

   Yonke okuqukethwe kwakho lapha

4. Isitayela se-div yokuqukethwe ibe nobubanzi obufanayo nokuphakama njengesithombe sangemuva:

   div # okuqukethwe {
   ububanzi: 20m;
   ukuphakama: 30m;
   }}

5. Bese ubeke okuqukethwe kuze kube ukuphakama okufanayo njengesithombe. Ngakho uma isithombe sakho singama-30m uzothola isitayela esiphakeme: -30; Ungakhohlwa ukubeka i-index ye-1 kokuqukethwe.

   #intent {
   isikhundla: isihlobo;
   phezulu: -30;
   z-index: 1;
   ububanzi: 20m;
   ukuphakama: 30m;
   }}

6. Bese ungeza ohlwini lwe-z lwe-1 kubasebenzisi be-IE 6, njengoba wenza ngaphezulu:

Futhi, ngesayizi sangemuva esithokozela isiphequluli esiphezulu sisekela manje, le ndlela futhi kungenzeka ukuthi ayidingekile futhi ihanjiswe njengomkhiqizo wesikhathi esidlule. Uma ngabe ufuna ukusebenzisa le ndlela, qiniseka ukuthi ukuhlola lokhu kuziphequluli eziningi ngangokunokwenzeka.

Futhi uma okuqukethwe kwakho kushintsha usayizi, kuzodingeka ushintshe usayizi wesitsha sakho nesithombe sangemuva, ngaphandle kwalokho, uzophela ngemiphumela engajwayelekile.