Bada shafukan yanar gizon ku na gani tare da bayanan bango
Hotuna suna da muhimmin bangare na zane-zanen shafukan yanar gizo. Wannan ya hada da yin amfani da hotunan baya. Waɗannan su ne hotuna da kuma hotuna waɗanda ake amfani da su a bayan yankunan shafi kamar yadda ya saba da hotuna da aka gabatar a matsayin ɓangare na shafukan yanar gizo. Wadannan hotuna na bayanan zasu iya ƙara sha'awa zuwa ga shafi da kuma taimaka maka cimma burin zane wanda za ka iya nema a shafi.
Idan za ku fara aiki tare da hotuna masu ban mamaki, to lallai za ku shiga cikin tarihin inda kuke son siffar ta shimfiɗa don dacewa da shafin.
Wannan shi ne ainihin gaskiyar ga yanar gizo masu amfani da suke kawowa zuwa manyan nau'ikan na'urori da masu girman allo .
Wannan sha'awar shimfiɗa bayanan hoton shine sha'awar masu zane-zanen yanar gizo saboda ba kowane hoto ya dace a sarari ba. Maimakon saita girman ƙayyadadden wuri, shimfiɗa hotunan ya ba shi damar sassauka don dacewa da shafin ko ta yaya fadi ko kunkuntar da browser browser yake.
Hanyar da ta fi dacewa ta shimfiɗa hoton don dacewa da bayanan shafi shine don amfani da dukiya na CSS3 , don ƙari-girma. Ga misalin da ke amfani da bayanan hoto don jiki na shafi kuma wanda ya sanya girman zuwa 100% don haka zai ci gaba da shimfiɗa don dace da allon.
jiki {
bayanan: url (bgimage.jpg) ba maimaitawa;
Girman girma: 100%;
}
A cewar caniuse.com, wannan dukiya tana aiki a IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, da kuma duk manyan manyan masu bincike na yanar gizo. Wannan yana rufe ku ga dukan bincike na yau da kullum da ke samuwa a yau, wanda ke nufin ya kamata ku yi amfani da wannan dukiya ba tare da jin tsoro ba zai yi aiki a kan allon wani.
Shirya Bayanan Bugawa a cikin Masu Bincike Tsoho
Yana da wuya cewa za ku buƙaci goyan bayan duk masu bincike da suka wuce IE9, amma bari muyi zaton cewa IE8 baya goyon bayan wannan dukiya. A cikin wannan misali, zaku iya karya karyaccen shimfiɗa. Kuma zaka iya amfani da prefixes na bincike don Firefox 3.6 (-moz-background-size) da Opera 10.0 (-o-background-size).
Hanyar mafi sauki ta karya karya ta shimfida bayanan hotunan shine a shimfiɗa shi a fadin shafin. Sa'an nan kuma baza ku ƙarasa tare da karin sarari ko kuma damu da cewa rubutunku ya dace a wuri mai shimfiɗa ba. Ga yadda akeyi:
id = "bg" />
- Na farko, tabbatar da cewa duk masu bincike suna da 100% tsawo, 0 hanyoyi, da 0 padding a kan HTML da abubuwan abubuwa. Sanya wannan a saman shafin HTML naka:
- Ƙara hoton da kake son zama bango a matsayin farkon ɓangaren shafin yanar gizon, kuma ya ba shi id na "bg":
- Matsayi bayanan hoton don an gyara shi a sama da hagu kuma yana da 100% fadi kuma 100% a tsawo. Ƙara wannan zuwa takarda ɗinku:
img # bg {
matsayi: gyarawa;
sama: 0;
hagu: 0;
nisa: 100%;
tsawo: 100%;
} - Ƙara duk abubuwan da ke ciki zuwa shafin cikin wani ɓangaren DIV tare da id na "abun ciki". Ƙara DIV a ƙarƙashin hoton:
Lura: yana da ban sha'awa don kalli shafinka yanzu. Ya kamata hoton ya nuna nunawa, amma abun ciki naka ya ɓace. Me ya sa? Domin hoton bayanan yana da 100% a tsawo, kuma ragowar ƙunshiyar bayan bayanan a cikin kwafin littafi - mafi yawan masu bincike basu nuna shi ba.Duk abubuwan da ke ciki a nan - ciki har da rubutun kai, sakin layi, da dai sauransu.
- Matsayi abin da ke ciki don ya kasance dangi kuma yana da z-index of 1. Wannan zai kawo shi a sama da bayanan baya a cikin masu bincike masu dacewa. Ƙara wannan zuwa takarda ɗinku:
#content {
matsayi: dangi;
z-index: 1;
}
- Amma ba a yi ba. Internet Explorer 6 ba daidaito ba ne kuma har yanzu yana da matsaloli. Akwai hanyoyi da dama don boye CSS daga kowane bincike amma IE6, amma mafi sauki (kuma mafi kusantar ya haifar da wasu matsalolin) shine amfani da maganganun yanayin. Sanya da wadannan bayan tsarin ka a kan littafinka:
- A cikin sharhin da aka nuna, ƙara wani sashi na style tare da wasu hanyoyi don samun IE 6 don wasa mai kyau:
- Tabbatar da gwadawa a IE 7 da kuma IE 8. Kila iya buƙatar daidaita abubuwan da za su goyi bayan su. Duk da haka, yana aiki lokacin da na gwada shi.
Yayi - wannan an shigar da shi sosai. Ƙananan shafuka suna buƙatar tallafa wa IE 7 ko 8 babu kuma, fiye da IE6!
Kamar yadda irin wannan, wannan tsari ba shi da amfani kuma ba zai dace ba. Na bar shi a nan more a matsayin samfurin son sani game da yadda abubuwa masu wuya sun kasance a gaban duk masu bincike mu buga haka da kyau tare!
Shirya Bayanan Bugawa Game da Ƙananan Ƙasa
Zaka iya amfani da irin wannan fasaha don karyaccen bayanan hotunan baya a fadin DIV ko wata maɓallin shafi a shafin yanar gizonku. Wannan abu ne mai mahimmanci kamar yadda dole ka yi amfani da matsayi na cikakke ko kuma samun matsala masu ban mamaki don wasu sassa na shafinka.
- Sanya hoton a kan shafin da nake son amfani dashi a baya.
- A cikin takarda, saita nisa da tsawo don hoton. Lura, zaka iya amfani da kashi ɗaya don girman ko tsawo, amma na ga ya fi sauƙi don daidaitawa tare da tsayin daka na tsawo.
img # bg {
nisa: 20em;
tsawo: 30m;
} - Sanya abin da ke ciki a cikin raba tare da id "abun ciki" kamar yadda muka yi a sama:
Duk abubuwan da ke ciki a nan
- Yanayin abun ciki ya zama daidai da nisa kamar hoton bayanan:
div # content {
nisa: 20em;
tsawo: 30m;
} - Sa'an nan kuma sanya abun ciki har zuwa wannan tsawo kamar hoton. Don haka idan hotonku ya kasance 30m za ku sami sifa na sama: -30em; Kar ka manta da ku saka z-index of 1 akan abun ciki.
#content {
matsayi: dangi;
sama: -30em;
z-index: 1;
nisa: 20em;
tsawo: 30m;
} - Sa'an nan kuma ƙara a z-index of -1 don masu amfani IE 6, kamar yadda kuka yi a sama:
Bugu da ƙari, tare da girman girma na jin dadin goyon baya na buƙatar tallafi a yanzu, wannan hanya kuma ba ta dace ba kuma an gabatar da ita azaman samfurin wani zamani. Idan kana so ka yi amfani da wannan tsarin, kawai tabbatar da gwada wannan a cikin masu bincike kamar yadda zaka iya.
Kuma idan abun ciki naka ya canza canji, za ku buƙaci canza girman karfin ku da image na baya, in ba haka ba, za ku ƙare tare da sakamako mara kyau.