Tsela ea ho otlolla setšoantšo sa hau sa mokokotlo ho fumana leqephe la Websaete

Fana ka sebaka sa hau sa marang-rang se bonang thahasello ka litšoantšo tse sa tšoaneng

Litšoantšo ke karolo ea bohlokoa ea liqapi tse ntle tsa marang-rang. Sena se akarelletsa tšebeliso ea litšoantšo tsa morao. Tsena ke litšoantšo le litšoantšo tse sebelisoang likarolong tsa leqephe ho fapana le litšoantšo tse hlahisoang e le karolo ea maqephe a litaba. Litšoantšo tsena tsa litšoantšo li ka eketsa thahasello ea pono ho leqephe mme li u thusa hore u finyelle ponahalo eo u ka e batlang leqepheng.

Haeba o qala ho sebetsa le litšoantšo tsa morao-rao, ha ho pelaelo hore o tla kena boemong boo u batlang setšoantšo ho otlolla ho lona.

Sena ke 'nete haholo-holo bakeng sa liwebsaete tse arabelang tse nkiloeng ho mefuta e sa tšoaneng ea lisebelisoa le boholo ba lichelete .

Ena takatso ea ho itšetleha ka setšoantšo sa setšoantšo ke takatso e tloaelehileng ea baqapi ba websaete hobane ha ho setšoantšo se seng le se seng se lumellanang le sebaka sa websaeteng. Ho e-na le ho beha boholo bo tsitsitseng, ho otlolla setšoantšo ho e lumella hore e feto-fetohe ho lumellana le leqephe ho sa tsotellehe hore na fensetere ea sebapali e pharaletse hakae kapa e patisane.

Tsela e molemohali ea ho otlolla setšoantšo ho lumellana le semelo sa leqephe ke ho sebelisa thepa ea CSS3 , bakeng sa boholo ba mokokotlo. Mohlala ke ona o sebelisang setšoantšo sa mokokotlo bakeng sa 'mele oa leqephe mme o behang boholo ho 100% e le hore o lule o otlolohile ho lumellana le skrine.

'mele {
setsi sa morao: url (bgimage.jpg) ha ho pheta-pheta;
boholo ba mokokotlo: 100%;
}}

Ho ea ka caniuse.com, setša sena se sebetsa ho IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, le libukeng tsohle tse kholo tsa li-mobile. Sena se u koahela bakeng sa lipapali tsa mehleng ena tse fumanehang kajeno, tse bolelang hore o lokela ho sebelisa thepa ena ntle le tšabo ea hore ha e sebetse skrineng ea motho.

Ho tšoara Nako e Otlolohileng ho Li-Browsers Tsa Khale

Ho ke ke ha etsahala hore o tla hloka ho ts'ehetsa libuka tsohle tsa khale ho feta IE9, empa a re nke hore u amehile ka hore IE8 ha e tšehetse thepa ena. Ketsahalong eo, o ka etsa leshano le otlolohileng. Hape u ka sebelisa prefixes ea sebapali bakeng sa Firefox 3.6 (-moz-background-size) le Opera 10.0 (-o-background-size).

Tsela e bonolo ka ho fetisisa ea ho fake setšoantšo sa lehlakoreng le otlolohileng ke ho se otlolla ho pholletsa le leqephe lohle. Joale ha u phethe sebaka se eketsehileng kapa u tšoenyehile hore temana ea hau e lumellana le sebaka se otlolohileng. Tsela ea ho e etsa mona:

id = "bg" />

1. Ntlha ea pele, etsa bonnete ba hore li-browser tsohle li na le bophahamo ba 100%, margins a 0, le 0 padding holim'a likarolo tsa HTML BODY. Kenya lintho tse latelang sehloohong sa tokomane ea hau ea HTML:

2. Eketsa setšoantšo seo u batlang ho ba sona morao e le karolo ea pele ea leqephe la websaeteng, 'me ue fe id ea "bg":

3. Beha setšoantšo sa mokokotlo e le hore se behoe ka holimo le ka ho le letšehali 'me se bolelele ba 100% le bophahamo ba 100%. Kenya sena ho lekarete la hau la mokhoa:

   img # bg {
   boemo: bo tsitsitseng;
   holimo: 0;
   ka ho le letšehali: 0;
   bophara: 100%;
   bolelele: 100%;
   }}

4. Kenya lintho tsohle tsa hau ho leqephe ka hare ho ntho ea DIV e nang le "content" ea id. Kenya DIV ka tlasa setšoantšo:

   Litaba tsohle tsa hau mona - ho akarelletsa lihlooho, lirapa, joalo-joalo.

   Tlhokomeliso: hoa thahasellisa ho sheba leqephe la hau hona joale. Setšoantšo se lokela ho bonahala se otlotsoe, empa dikahare tsa hau ha li fumanehe ka ho feletseng. Hobane'ng? Hobane setšoantšo sa mokokotlo se bophahamo ba 100%, mme karohano ea dikahare e na le kamora setšoantšo ho phalla ha tokomane - li-browser tse ngata li ke ke tsa e bontša.
   
5. Beha dikahare tsa hau e le hore li lekane ebile li na le index ea 1. E tla e tlisa ka holimo ho setšoantšo sa morao-rao ka litekanyetso-li-browser tse lumellanang. Kenya sena ho lekarete la hau la mokhoa:

   #content {
   boemo: kamano;
   z-index: 1;
   }}

1. Empa ha oa etsoa. Internet Explorer 6 ha e na melao e lumellanang mme e ntse e na le mathata. Ho na le litsela tse ngata tsa ho pata CSS ho sebapali se seng le se seng empa ke IE6, empa ho bonolo haholo (mme ho ka 'na ha e-ba bonolo ho baka mathata a mang) ke ho sebelisa maikutlo a mangolo. Beha lintlha tse latelang ka mor'a mokhoa oa hau oa litlhaku hloohong ea tokomane ea hau:

2. Ka hare ho polelo e totobetseng, eketsa leqephe le leng la setaele le mekhoa e meng ho fumana IE 6 ho bapala e ntle:

3. Etsa bonnete ba hore u leke ho IE 7 le IE 8 hape. U ka 'na ua hloka ho fetola litlhaloso ho ba tšehetsa hape. Leha ho le joalo, e ile ea sebetsa ha ke e hlahloba.

E le hantle - sena ke 'nete hore TSELA e phahame. Liwebsaete tse fokolang li hloka ho tšehetsa IE 7 kapa 8, ha ho sa le joalo, ho feta IE6!

Ka tsela e joalo, mokhoa ona o hlokomolohile 'me mohlomong ha oa hlokahale ho uena. Ke e tlohela mona haholoanyane e le mohlala oa thahasello ea hore na ho na le lintho tse thata hakaakang pele li-browser tsa rona kaofela li bapala hantle haholo!

Ho tšoara Setšoantšo sa Borokho bo Otlolohileng ka Nakoana e Nyenyane

U ka sebelisa mokhoa o tšoanang ho fake setšoantšo se otlolohileng ka morao ho DIV kapa ntho e 'ngoe leqepheng la hau la marang-rang. Sena se thata haholo ha u lokela ho sebelisa boemo bo feletseng kapa u na le lintlha tse sa tloaelehang tsa likarolo bakeng sa likarolo tse ling tsa leqephe la hau.

1. Beha setšoantšo se leqepheng leo ke batlang ho le sebelisa ka morao.

2. Lethathamong la mokhoa, beha bophara le bophahamo ba setšoantšo. Hlokomela, o ka sebelisa liphesente bakeng sa bophara kapa bolelele, empa ke fumana ho le bonolo ho lumellana le litekanyetso tsa bolelele tsa bophahamo.

   img # bg {
   bophara: 20em;
   bolelele: 30em;
   }}

3. Beha lintho tsa hau karolong e nang le "sekahare" sa hau joalokaha re entse ka holimo:

   Litaba tsohle tsa hau mona

4. Etsa hore div content e be bophara le bophahamo bo lekanang le setšoantšo sa morao:

   div # content {
   bophara: 20em;
   bolelele: 30em;
   }}

5. Ebe u beha likarolo ho fihlela li lekana le setšoantšo. Kahoo haeba setšoantšo sa hau se le 30em o tla ba le mokhoa oa holimo: -30; U se ke ua lebala ho beha l-index ea 1 ho dikahare.

   #content {
   boemo: kamano;
   holimo: -30em;
   z-index: 1;
   bophara: 20em;
   bolelele: 30em;
   }}

6. Ebe u eketsa ka-index ea -1 bakeng sa basebelisi ba IE 6, joalokaha u entse ka holimo:

Hape, ka boholo ba mokokotlo o thabela botšehetsi bo pharaletseng bo fumanehang hona joale, mokhoa ona o boetse o ka 'na oa se hlokahale' me oa hlahisoa e le sehlahisoa sa nako e sa tloaelehang. Haeba u batla ho sebelisa mokhoa ona, etsa bonnete ba hore u leka sena ka li-browser tse ngata kamoo u ka khonang.

'Me haeba dikahare tsa hau li fetoha boholo, ho tla hlokahala hore u fetole boholo ba setshelo sa hau le setšoantšo sa hau sa mokokotlo, ho seng joalo, u tla qetella u e-na le liphello tse sa tloaelehang.