Omeo tombony amin'ny tranokalan-tserasera ny tranokalanao
Ny sary dia ampahany manan-danja amin'ny drafitra manintona tranonkala. Anisan'izany ny fampiasana sary vongana. Ireo no sary sy sary ampiasaina ao ambadiky ny pejy iray mifanohitra amin'ny sary izay aseho amin'ny ampahany amin'ny pejy. Ireo sary fototra ireo dia afaka manampy tombotsoa amin'ny pejy amin'ny pejy iray ary manampy anao hahatratra ny endrika sary izay mety hikaroka anao amin'ny pejy.
Raha manomboka miara-miasa amin'ny sary afara ianao, dia tsy isalasalana fa hiditra ao amin'ilay sehatra izay tianao iresahana sary iray mba hikolokolo ilay pejy.
Tena marina izany ho an'ireo tranonkala mamaly izay atolotra amin'ny fitaovam-pandaharana sy habaka marobe.
Ity faniriana hanitatra sary iray ity dia faniriana mahazatra ho an'ny mpamorona tranonkala satria tsy ny sary rehetra dia mifanaraka amin'ny habaky ny tranonkala iray. Raha tokony hampifanaraka ny habeo, dia ahafahana manitsy ilay pejy raha mamelatra ilay sary, na aiza na aiza, na aiza na aiza misy ny varavarankety .
Ny fomba tsara indrindra ahafahana mametaka sary iray ahafahana mampifanaraka ny sisintanin'ny pejy iray dia ny fampiasana ny CSS3 fananana, ho an'ny habe-lamina. Ity misy ohatra iray izay mampiasa sary iray momba ny vatana misy pejy iray ary mametraka ny habeny ho 100% mba hikorontana hatrany ny efijery.
body {
background: url (bgimage.jpg) no-avereno;
background-size: 100%;
}
Araka ny caniuse.com, ity trano ity dia miasa ao amin'ny IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, ary amin'ireo browsette lehibe rehetra. Izany dia mandrakotra anao amin'ireo browsers maoderina rehetra misy ankehitriny, izay midika fa tokony hampiasa io trano io ianao ary tsy hatahotra fa tsy hiasa amin'ny efijery amin'ny olona izany.
Fakana sary vetivety tany amin'ny tranokala taloha
Tsy dia misy dikany loatra ny ilainao hanohanana ireo navigateur efa mihoatra ny IE9, fa andeha hojerentsika fa miahiahy ianao fa ny IE8 dia tsy manohana ity trano ity. Ao anatin'izany ohatra izany, afaka mampihorohoro làlana maharitra ianao. Ary afaka mampiasa ny prefixes amin'ny browser amin'ny Firefox 3.6 (-moz-background-size) ary Opera 10.0 (-o-background-size).
Ny fomba tsotra indrindra hamadihana ny sarin-tanim-pahavitrihana mitongilana dia ny mamelatra azy manontolo amin'ny pejy manontolo. Avy eo dia tsy miafara amin'ny toerana fanampiny ianao na mila manahy fa mifanentana amin'ny faritry ny faritra ny lahatsoratrao. Toy izao ny fomba hanaovana azy:
id = "bg" />
- Voalohany, ataovy azo antoka fa manana habaka 100%, marika 0, ary 0 amin'ny fonosana HTML sy HTML avokoa ny navigateur rehetra. Apetraho eo amin'ny lohan'ny dossier HTML anao ireto manaraka ireto:
- Ampio ny sary tianao te-ho toy ny singa voalohany amin'ny pejy Internet, ary omeo ny id of "bg":
- Apetraho ny sary eo afovoany mba hametrahana azy eo an-tampony sy ankavia ary 100% ny sakany ary 100% ny haavony. Ampio amin'ny blaoginao izany:
img # bg {
toerana: voafetra;
top: 0;
havia: 0;
width: 100%;
avo: 100%;
} - Ampio ny votoatinao amin'ny pejy ao anaty singa iray an'ny DIV miaraka amin'ny "votoatiny". Ampio ny DIV ambanin'ny sary:
Fanamarihana: mahaliana ny mijery ny pejinao izao. Ny sary dia tokony hampisehoana, fa ny votoatiny dia tsy hita popoka. Nahoana? Satria ny haavon-tsivana dia 100% ny haavony, ary ny fizaràna votoaty dia aorian'ny sary eo am-pelatanan'ny rakitra - ny ankamaroan'ny navigateur dia tsy mampiseho izany.Ny votoatiny rehetra eto - anisan'izany ny lohateny, fehintsoratra, sns.
- Amboary ny votoatinao mba hahatonga azy ho havana sy manana z-index of 1. Izany dia hitondra azy eo ambonin'ny sary eo afovoan'ny navigateur amin'ny serasera. Ampio amin'ny blaoginao izany:
#content {
toerana: relative;
z-index: 1;
}
- Saingy tsy vita izany. Internet Explorer 6 dia tsy mifanaraka amin'ny fitsipika ary mbola misy olana ihany. Misy fomba maro hanafenana ny CSS amin'ny navigateur rehetra fa IE6, fa ny mora indrindra (ary kely indrindra ny mahatonga ny olana hafa) dia ny fampiasana fanehoan-kevitra mifanaraka. Apetraho ao amin'ny lohan'ny rakitrao manaraka ireto manaraka ireto:
- Ao anatin'ilay fanamarihana nasongadina, dia asio fomban-taratasy hafa miaraka amin'ny fomba sasany hahazoana IE 6 mba hilalao tsara:
- Aoka ho azo antoka ny fitsapana amin'ny IE 7 sy IE 8 koa. Azonao atao ny manitsy ny fanehoan-kevitra hanohana azy ireo koa. Na izany aza, dia niasa izany rehefa notsapako izany.
OK - ity dia mahazatra ny FAHAFAHANA. Trano vitsy no mila manohana an'i IE 7 na 8 intsony, IE6 mihitsy aza!
Noho izany, ity fomba fitsaboana ity dia efa antitra ary mety tsy ilaina aminao. Mamela azy io ho modely ho an'ny fahalianana aho momba ny zavatra sarotra kokoa talohan'ny nandraisan'ireo mpijery tranonkala tsara be!
Famoahana sary mihetsika efa nipoitra tampoka teo amin'ny toerana kely
Azonao atao ny mampiasa fomba fiasa toy izany mba hampisehoana sary manjavozavola manjavozavo amin'ny DIV na singa iray hafa ao amin'ny pejin'ny tranonkala. Mampihetsi-po anao izany satria tsy maintsy mampiasa ny fametrahana tanteraka ianao na manana olana hafahafa ho an'ny faritra hafa ao amin'ny pejinao.
- Apetraho eo amin'ny pejy izay tiako hampiasaina ho toy ny fototra ny sary.
- Soraty ny habe sy ny haavon'ny sary eo amin'ny sary. Mariho fa azonao ampiasaina ny isan-jaton'ny habaka na haavony, saingy hitako fa mora kokoa ny manitsy ny lanjany ho an'ny halavany.
img # bg {
width: 20em;
avo: 30em;
} - Apetraho ao anaty div io ny votoatinao miaraka amin'ny "votoaty" idika tahaka ny nataontsika etsy ambony:
Ny votoatiny rehetra eto
- Amboary ny votoatin'ny dite ho mitovy halava sy haavo toy ny sary eo afovoany:
div # content {
width: 20em;
avo: 30em;
} - Avy eo dia mametraka ilay votoaty ho avo mitovy amin'ny sary. Koa raha ny saryo dia ny 30e dia tokony hanana style ianao: -30em; Aza adino ny mametraka ny z-index of 1 amin'ny votoatiny.
#content {
toerana: relative;
top: -30em;
z-index: 1;
width: 20em;
avo: 30em;
} - Ampio amin'ny z-index -1 ny mpampiasa IE 6, araka izay nataonao etsy ambony:
Amin'izao fotoana izao, noho ny habeny matihanina mankafy ny fanohanan'ny tranonkala lehibe ankehitriny, ity fomba ity koa dia mety tsy ilaina ary aseho amin'ny vokatra efa nisy taloha. Raha te hampiasa an'io fomba io ianao, azonao atao fotsiny ny mamandrika izany amin'ny ankamaroan'ny navigateur araka izay azonao atao.
Ary raha manova tarehimarika ny votoatiny, dia mila manova ny haben'ny kaontinao sy ny sary ianao, raha tsy izany, dia hiafara amin'ny vokatra hafahafa ianao.