Agħti l-interess viżiv tal-website tiegħek bi grafika tal-isfond
L-immaġini huma parti importanti tad-disinji attraenti tal-websajt. Dan jinkludi l-użu ta 'stampi ta' sfond. Dawn huma l-immaġni u l-grafika li jintużaw wara żoni ta 'paġna għall-kuntrarju ta' immaġini li huma ppreżentati bħala parti mill-paġni tal-kontenut. Dawn l-istampi tal-isfond jistgħu jżidu l-interess viżiv għal paġna u jgħinuk tikseb id-disinn viżwali li tista 'tfittex fuq paġna.
Jekk tibda taħdem b'immaġnijiet ta 'l-isfond, bla dubju taqa' taħdem fix-xenarju fejn trid immaġni biex tistira biex taqbel mal-paġna.
Dan hu veru speċjalment għal websajts li jirrispondu li qed jiġu kkonsenjati f'firxa wiesgħa ta 'apparati u daqsijiet ta' skrin .
Din ix-xewqa li tinfirex l-immaġini ta 'sfond hija xewqa komuni ħafna għall-disinjaturi tal-web għaliex mhux kull immaġini tidħol fl-ispazju ta' websajt. Minflok ma tistabbilixxi daqs fiss, it-tiġbid ta 'l-immaġni jippermettilha li tidħol sewwa biex taqbel mal-paġna, kemm kemm ikun wiesa' jew dojoq it -tieqa tal-browser .
L-aħjar mod biex tistira immaġni biex taqbel ma 'l-isfond ta' paġna hija li tuża l-proprjetà CSS3 , għad-daqs ta 'l-isfond. Hawn hu eżempju li juża immaġni ta 'l-isfond għall-ġisem ta' paġna u li jiffissa d-daqs għal 100% sabiex dejjem ikun jista 'jitwaħħal ma' l-iskrin.
korp {
isfond: url (bgimage.jpg) le-repetizzjoni;
daqs tal-isfond: 100%;
}
Skond caniuse.com, din il-proprjetà taħdem f'IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, u fuq il-browsers mobbli maġġuri. Dan ikopri lilek għall-browsers moderni kollha disponibbli llum, u dan ifisser li għandek tuża din il-proprjetà mingħajr biża 'li ma taħdimx fuq l-iskrin ta' xi ħadd.
Tħassir ta 'Sfond Estiż fl-Browsers Older
Mhuwiex probabbli li jkollok bżonn tappoġġja kwalunkwe browsers akbar minn IE9, imma nassumu li int imħasseb li l-IE8 ma tappoġġjax din il-proprjetà. F'dak il-każ, tista 'tfixkel sfond imġebbed. U tista 'tuża l- prefissi tal-browser għal Firefox 3.6 (-moz-background-size) u Opera 10.0 (-o-background-size).
L-eħfef mod biex titqajjem immaġni ta 'sfond imġebbda huwa li tinfirex fuq il-paġna kollha. Imbagħad int ma tispiċċax bi spazju żejjed jew ikollok għalfejn tinkwieta li t-test tiegħek joqgħod fiż-żona mġebbda. Ara kif għandek tagħmel dan:
id = "bg" />
- L-ewwelnett, kun żgur li l-browsers kollha għandhom għoli ta '100%, 0 marġini, u padding 0 fuq l-elementi HTML u KORP. Poġġi dan li ġej fir-ras tad-dokument HTML tiegħek:
- Żid l-immaġni li trid tkun l-isfond bħala l-ewwel element tal-paġna web, u agħtih l- id ta '"bg":
- Poġġi l- immaġini ta 'l-isfond sabiex tkun imwaħħla fuq ix-xellug u tkun 100% wiesgħa u 100% f'għoli. Żid dan mal-karta tal-istil tiegħek:
img # bg {
pożizzjoni: fissa;
top: 0;
xellug: 0;
wisa ': 100%;
għoli: 100%;
} - Żid il-kontenut kollu tiegħek fil-paġna ġewwa ta 'element DIV b'id ta' "kontenut". Żid id-DIV taħt l-immaġni:
Nota: huwa interessanti li tħares lejn il-paġna tiegħek issa. L-immaġni għandha tidher estiża, iżda l-kontenut tiegħek huwa kompletament nieqes. Għaliex? Minħabba li l-immaġni tal-isfond hija 100% għoli, u d-diviżjoni tal-kontenut hija wara l -immaġni fil-fluss tad-dokument - ħafna mill-browsers mhux se juruh.Il-kontenut kollu tiegħek hawnhekk - inklużi headers, paragrafi, eċċ.
- Poġġi l-kontenut tiegħek b'tali mod li jkun relattiv u għandu z-indiċi ta '1. Dan se jġibha' l fuq mill-immaġni ta 'sfond f'laboraturi konformi ma' l-istandards. Żid dan mal-karta tal-istil tiegħek:
#kontenut {
pożizzjoni: relattiva;
z-index: 1;
}
- Imma int mhux qed isir. L-Internet Explorer 6 mhix konformi mal-istandards u għad għandha xi problemi. Hemm ħafna modi kif taħbi CSS minn kull browser imma IE6, iżda l-aktar faċli (u l-anqas probabbli li tikkawża problemi oħra) hija li tuża kummenti kondizzjonali. Poġġi dan li ġej wara l-istil tal-istil tiegħek fir-ras tad-dokument tiegħek:
- Ġewwa l-kumment enfasizzat, żid folja stil oħra b'xi stili biex tikseb IE 6 biex tilgħab sbieħ:
- Kun żgur li tittestja f'IE 7 u IE 8 ukoll. Jista 'jkollok bżonn taġġusta l-kummenti biex issostnihom ukoll. Madankollu, ħadem meta ttestjajt.
OK - din ċertament hija WAY overkill. Ftit li xejn is-siti jeħtieġu li jappoġġaw IE 7 jew 8 aktar, ħafna inqas IE6!
Bħala tali, dan l-approċċ huwa antikwat u x'aktarx mhux meħtieġ għalik. Nħalliha hawn aktar bħala mudell ta 'kurżità dwar kemm affarijiet aktar diffiċli kienu qabel ma l-browsers tagħna kellhom daqshekk tajjeb flimkien!
Tħassir ta 'Stretched Background Image fuq spazju iżgħar
Tista 'tuża teknika simili għal foloz immaġni ta' sfond imġebbda fuq DIV jew element ieħor fuq il-paġna web tiegħek. Dan huwa daqsxejn aktar delikat għax għandek jew tuża pożizzjonament assoluta jew ikollok kwistjonijiet ta 'spazju strambi għal partijiet oħra tal-paġna tiegħek.
- Poġġi l-immaġni fuq il-paġna li nixtieq nuża bħala l-isfond.
- Fil-folja tal-istil, issettja wisa 'u għoli għall-immaġini. Innota, tista 'tuża perċentwali għal wisa' jew għoli, iżda nsibha aktar faċli biex taġġusta bil-valuri tat-tul għall-għoli.
img # bg {
wisa ': 20em;
għoli: 30em;
} - Poġġi l-kontenut tiegħek f'div bl-id "kontenut" kif għamilna hawn fuq:
Il-kontenut kollu tiegħek hawn
- Iddisinja d-div tal-kontenut bħala l-istess wisa 'u għoli daqs l-immaġni ta' sfond:
div # kontenut {
wisa ': 20em;
għoli: 30em;
} - Imbagħad poġġi l-kontenut sa l-istess għoli daqs l-immaġni. Mela jekk l-immaġni tiegħek hija 30em ikollok stil ta 'fuq: -30em; Tinsiex li tpoġġi z-indiċi ta '1 fuq il-kontenut.
#kontenut {
pożizzjoni: relattiva;
top: -30em;
z-index: 1;
wisa ': 20em;
għoli: 30em;
} - Imbagħad żid indiċi-z ta '-1 għall-utenti IE 6, kif għamilt hawn fuq:
Għal darb'oħra, bid-daqs ta 'l-isfond li jgawdi l-appoġġ wiesa' tal-brawżer li issa jagħmel, dan l-approċċ x'aktarx wisq mhux meħtieġ u ppreżentat bħala prodott ta 'l-era li għaddiet. Jekk għamilt trid tuża dan l-approċċ, kun żgur li tittestja dan f'ħafna browsers kemm tista '.
U jekk il-kontenut tiegħek jinbidel fid-daqs, ikollok bżonn tibdel id-daqs tal-kontenitur tiegħek u l-immaġni ta 'sfond, inkella, int ser tispiċċa b'riżultati strambi.