Sidee loo Bixiyaa Muuqaal Sawir ah si Loo Joojiyo Website-ka

Sii aad xiisaha muuqaalka ah ee muuqaalkaaga leh ee muuqaalka sawirada

Sawiradu waa qayb muhiim ah oo ka mid ah naqshadaha bogga soo jiidashada. Tan waxaa ka mid ah isticmaalka sawirada asalka ah. Kuwani waa sawirrada iyo garaafyada loo isticmaalo goobaha ka baxsan bogga oo ka soo horjeeda sawirada lagu soo bandhigay qayb ka mid ah boggaga mawduuca. Sawirada asalka ah waxay ku dari karaan xiisaha muuqaalka bogga waxayna kaa caawin karaan inaad gaarto naqshadda muuqaalka ah ee aad raadin karto bog.

Haddii aad bilowdo inaad la shaqeyso sawirada asalka ah, waxaad shaki ku jiri doontaa masraxa meesha aad rabto sawir si aad u furtid bogga.

Tani waxay si gaar ah u tahay kuwa loogu talagalay website-yada wax ku oolka ah ee lagu keenayo aalado kala duwan iyo qiyaasta sawirka .

Rabitaankani inuu ku fidiyo sawirka taariikhda ayaa ah rabitaan aad uwanaagsan oo loogu talagalay naqshadayaasha websaydhka sababtoo ah sawir walbaa kuma habboona bogga internetka. Halkii ay dejin lahayd cabbir qadar ah, iskuxirka sawirku wuxuu u oggolaanayaa inuu dabacsan yahay si uu ugu habboonaado bogga iyada oo aan loo eegin sida ballaaran ama cidhiidhiga daaqada browser .

Habka ugu fiican ee lagu sawirayo sawir si uu ugu habboonaado asalka bogga waa in la isticmaalo hantida CSS3 , ee qiyaasta asalka ah. Halkan waxaa ah tusaale tusaale ah oo isticmaalaya muuqaalka asalka ah ee jirka ee bogga kaas oo dhigaya cabbirka 100% si ay marwalba u fidiso si ay ugu haboonaato shaashadda.

jirka {
asalka: url (bgimage.jpg) marna ku celin;
qiyaasta asalka ah: 100%;
}

Sida laga soo xigtay caniuse.com, qalabkani wuxuu ka shaqeeyaa IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, iyo dhammaan shabakadaha waaweyn ee moobaylka. Tani waxay ku dabooleysaa dhamaan duufiyeyaasha casriga ah ee maanta la heli karo, taas oo macnaheedu yahay inaad u isticmaasho hantidaan iyagoon cabsi ka qabin inaysan shaqeyneynin shaashadda qof.

Raadinta Aragtida Hore ee Habboonayaasha Hore

Waa mid aan lagama maarmaanka ah inaad u baahan tahay inaad taageerto dijitaaleyaal kasta oo ka weyn IE9, laakiin aan u maleyno in aad ka walwalsan tahay in IE8 uusan taageereynin hantidaas. Tusaale ahaan, waxaad ku siyaadin kartaa asalka dhabta ah. Oo waxaad isticmaali kartaa horgalaha shabakadda ee Firefox 3.6 (-moz-as-size-size) iyo Opera 10.0 (-o-asal-size).

Habka ugu sahlan ee lagu sawirayo sawir muuqaalkiisu waa kala dheereynta waa inuu ku fidiyo bogga oo dhan. Kadibna ma dhicin meel bannaan oo dheeraad ah ama aad ka walwalsan tahay in qoraalkaagu uu ku habboon yahay aagga isweydaarsanayo. Halkan waa sida loo sameeyo:

id = "bg" />

1. Marka hore, hubso in dhammaan daalacayaashu ay leeyihiin 100% dhererka, 0 margins, iyo 0 ku dhufanayo waxyaallaha iyo qaabka HTML BODY. Ku dhaji waxyaabaha soo socda ee madaxa dukumiintiga HTML:

2. Ku dar sawirka aad rabto inaad asalka u noqoto sida elementka koowaad ee bogga shabakadda, oo ku siiso magaca "bg":

3. Muuji sawirka asalka ah si uu u xajisto xagga sare iyo bidix waana 100% oo ballaaran iyo 100% dherer ahaan. Ku dar tan warqadda qaabka:

   img # bg {
   Goobta: go'an;
   top: 0;
   bidix: 0;
   width: 100%;
   dhererka: 100%;
   }

4. Ku dar dhammaan waxyaabahaaga bogga gudaha gudaha DIV oo leh aqoonsi "content". Ku dar DIV hoosta sawirka:

   Dhammaan waxyaabaha aad halkan ku jirto - oo ay ku jiraan madaxyada, cutubyada, iwm.

   Ogsoonow: waa mid xiiso leh inaad eegto boggaaga hadda. Sawirku waa inuu muujiyaa fidsan, laakiin mawduucaaga ayaa si buuxda u maqan. Waa maxay sababta? Sababtoo ah sawirka asalka ah waa 100% oo dherer ah, qaybta maadada ayaa ah ka dib sawirka dukumeentiga dukumiintiga - badiyayaashu ma muujin doonaan.
   
5. Muuji waxyaabahaaga si ay u noqoto mid qaraabo ah oo uu leeyahay z-index of 1. Tani waxay ka keeni doontaa kor ka muuqaalka asalka ah ee dookheyaal u hoggaansan heerarka. Ku dar tan warqadda qaabka:

   #content {
   Goob: qaraabo;
   z-index: 1;
   }

1. Laakiin looma qaban. Internet Explorer 6 ma aha heerar u hoggaansamaya oo wali waxaa jira dhibaatooyin. Waxaa jira siyaabo fara badan oo lagu qarin karo CSS kasta browser kasta, laakiin IE6, laakiin ugu fudud (oo aan u badnayn inuu keeno dhibaatooyin kale) waa inay isticmaalaan faallooyin shuruudaysan. Ku dheji waxyaabahan soo socda ka dib qoraalkaaga ku yaal madaxa madaxa dukumiintigaaga:

2. Gudaha faallooyinka muhiimka ah, ku dar faahfaahin kale oo qaab leh qaababka qaarkood si aad u hesho IE 6 si aad u ciyaarto:

3. U hubso inaad ku tijaabiso IE 7 iyo IE 8 sidoo kale. Waxaa laga yaabaa inaad u baahato inaad hagaajiso faallooyinka si aad u taageerto. Si kastaba ha ahaatee, waxay shaqeysay markii aan baaray.

OK - kani waa qarsoodi ah WIC. Goobo aad u yar ayaa u baahan inay taageeraan IE 7 ama 8 xitaa, IE6 aad u yar!

Sidaa daraadeed, qaabkani waa mid taariikhiga ah oo aan loo baahnayn. Waxaan halkan uga tagayaa qaab kale oo xiiso leh sida intee in le'eg ayey waxyaabo adag u ahaayeen ka hor intaan dhamaan tarjumeyaashayadu si wada jir ah u wada ciyaaraan!

Raadinta Muuqaal Sawir leh Sawir Weyn

Waxaad isticmaali kartaa farsamada la midka ah si aad u galiso sawir muuqaal ah oo ku yaal DIV ama qayb kale oo ku yaal boggaaga internetka. Tani waa mid aad u yaryar sida aad u leedahay inaad isticmaasho jadwalka ku-meel-gaadhka ah ama aad kala kulantid arimaha kala duwan ee qaybaha kale ee boggaaga.

1. Ku dheji sawirka bogga aan rabo inaan isticmaalo sida asalka ah.

2. Qoraalka qaab-dhismeedka, ku dheji dhererka iyo dhererka sawirka. Ogow, waxaad isticmaali kartaa boqolleyda ballaadhanka ama dhererka, laakiin waxaan u sahlanahay in la isku hagaajiyo qiimaha dhererka dhererka.

   img # bg {
   width: 20em;
   dhererka: 30d;
   }

3. Meelahaaga ku dheji qaybta "content" id ah sida aan kor ku soo sheegnay:

   Dhammaan waxyaabaha aad halkan ku haysato

4. Nooc daaha div oo ah inuu noqdo mid isku mid ah iyo dherer ahaan sawirka asalka ah:

   div # content {
   width: 20em;
   dhererka: 30d;
   }

5. Ka dibna ku dheji mawduucii ilaa heer isku mid ah sawirka. Sidaa darteed haddii sawirkaagu yahay 30em waxaad lahaan lahayd qaab dabool ah: -30em; Ha ilaawin inaad dhigto Z-index of 1 ee content.

   #content {
   Goob: qaraabo;
   top: -30em;
   z-index: 1;
   width: 20em;
   dhererka: 30d;
   }

6. Ka dibna ku dar j-index-ka loogu talagalay isticmaalaha IE 6, sida aad kor ugu qaadday:

Mar labaad, iyada oo qadar-cabbir ku raaxeysanaya taageerada shabakada ballaadhan ee hadda la sameeyo, habkan ayaa sidoo kale loo badinayaa inaan loo baahnayn oo loo soo bandhigay sidii wax soo saarkeedii hore. Haddii aad rabtay inaad isticmaasho habkan, kaliya hubi inaad tan ku tijaabiso boodhadhka badan sida aad awooddo.

Iyo haddii maadadaada bedesho size, waxaad u baahan doontaa inaad bedesho xajmiga weelkaaga iyo sawirkaaga asalka ah, haddii kale, waxaad ku dhamaan doontaa natiijooyin qariib ah.