Jinsi ya kufuta Image Background ili Fit Ukurasa wa Mtandao

Kutoa tovuti yako ya maslahi ya kuona na picha za background

Picha ni sehemu muhimu ya miundo ya tovuti yenye kuvutia. Hii ni pamoja na matumizi ya picha za background. Haya ni picha na michoro ambazo hutumiwa nyuma ya maeneo ya ukurasa kinyume na picha zinazowasilishwa kama sehemu ya kurasa za maudhui. Picha hizi za asili zinaweza kuvutia riba kwa ukurasa na kukusaidia kufikia muundo wa visu ambazo unaweza kuwa unatafuta kwenye ukurasa.

Ikiwa unapoanza kufanya kazi na picha za asili, bila shaka utaendana na hali ambapo unataka picha ili kunyoosha ili kuzingatia ukurasa.

Hii ni kweli hasa kwa tovuti za msikivu ambazo zinapatikana kwenye vifaa mbalimbali na ukubwa wa skrini .

Tamaa hii ya kunyoosha picha ya asili ni tamaa ya kawaida kwa wabunifu wa mtandao kwa sababu si kila picha inafaa katika nafasi ya tovuti. Badala ya kuweka ukubwa uliowekwa, kutambulisha picha inaruhusu kuzibadili kufanana na ukurasa bila kujali jinsi pana au nyembamba dirisha la kivinjari .

Njia bora ya kunyoosha picha ili kufanana na historia ya ukurasa ni kutumia mali CSS3 , kwa ukubwa wa nyuma. Hapa ni mfano ambao unatumia picha ya historia kwa mwili wa ukurasa na ambayo huweka ukubwa hadi 100% ili iweze kukaa daima ili ufanike skrini.

mwili {
background: url (bgimage.jpg) hakuna-kurudia;
ukubwa wa asili: 100%;
}

Kwa mujibu wa caniuse.com, mali hii inafanya kazi katika IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, na kwenye vivinjari vyote vikuu vya simu. Hii inashughulikia wewe kwa vivinjari vyote vya kisasa vinavyopatikana leo, ambayo ina maana unapaswa kutumia mali hii bila hofu ya kwamba haitatumika kwenye skrini ya mtu.

Inajifungua Background iliyosafishwa kwa Vivinjari Vya Kale

Haiwezekani kwamba unahitaji kuunga mkono browsers yoyote kubwa kuliko IE9, lakini hebu tuseme kuwa una wasiwasi kwamba IE8 haitoi mali hii. Katika hali hiyo, unaweza kufuta historia iliyoweka. Na unaweza kutumia prefixes ya kivinjari ya Firefox 3.6 (-moz-background-size) na Opera 10.0 (-o-background-ukubwa).

Njia rahisi kabisa ya bandia picha ya asili iliyotiwa ni kunyoosha kwenye ukurasa mzima. Kisha huwezi kuishia na nafasi ya ziada au kuwa na wasiwasi kwamba maandishi yako yanafaa katika eneo lililotiwa. Hapa ni jinsi ya kufanya hivyo:

id = "bg" />

1. Kwanza, hakikisha kwamba browsers zote zina urefu wa 100%, margins 0, na 0 padding kwenye vipengele vya HTML na BODY. Weka zifuatazo katika kichwa cha hati yako ya HTML:

2. Ongeza picha unayotaka kuwa background kama kipengele cha kwanza cha ukurasa wa wavuti, na uipe id ya "bg":

3. Weka picha ya historia ili iwezekwe juu na kushoto na ni 100% pana na 100% kwa urefu. Ongeza hii kwenye karatasi yako ya mtindo:

   img # bg {
   nafasi: fasta;
   juu: 0;
   kushoto: 0;
   upana: 100%;
   urefu: 100%;
   }

4. Ongeza maudhui yako yote kwenye ukurasa ndani ya kipengele cha DIV kilicho na "maudhui" ya id. Ongeza DIV chini ya picha:

   Maudhui yako yote hapa - ikiwa ni pamoja na vichwa, aya, nk.

   Kumbuka: ni ya kuvutia kuangalia ukurasa wako sasa. Picha inapaswa kuonyeshwa, lakini maudhui yako haipo kabisa. Kwa nini? Kwa sababu picha ya historia ni urefu wa 100%, na mgawanyiko wa maudhui ni baada ya picha katika mtiririko wa waraka - vivinjari vingi havitaionyesha.
   
5. Weka maudhui yako ili iwe jamaa na ina index ya 1. Hii italeta juu ya picha ya nyuma katika vivinjari vinavyolingana na viwango. Ongeza hii kwenye karatasi yako ya mtindo:

   #content {
   msimamo: jamaa;
   z-index: 1;
   }

1. Lakini hujafanyika. Internet Explorer 6 sio viwango vinavyolingana na bado kuna matatizo fulani. Kuna njia nyingi za kuficha CSS kutoka kila kivinjari lakini IE6, lakini rahisi (na uwezekano mkubwa wa kusababisha matatizo mengine) ni kutumia maoni ya masharti. Weka zifuatazo baada ya stylesheet yako katika kichwa cha hati yako:

2. Ndani ya maoni yaliyotajwa, ongeza karatasi ya mtindo mwingine na mitindo mingine ili kupata IE 6 kucheza nzuri:

3. Hakikisha kuhakiki katika IE 7 na IE 8 pia. Huenda ukahitaji kurekebisha maoni ili kuwasaidia pia. Hata hivyo, ilifanya kazi wakati nilijaribu.

Sawa - hii ni hakika WAY overkill. Sehemu chache sana zinahitajika kusaidia IE 7 au 8 tena, zaidi ya IE6!

Kwa hivyo, mbinu hii ni ya kale na haiwezekani kwako. Ninaondoka hapa zaidi kama mfano wa udadisi wa jinsi gani mambo magumu yalivyokuwa kabla ya vivinjari vyote vilivyocheza vizuri sana!

Kufanya picha ya picha iliyopigwa juu ya nafasi ndogo

Unaweza kutumia mbinu sawa na bandia picha ya asili iliyowekwa kwenye DIV au kipengele kingine kwenye ukurasa wako wa wavuti. Hii ni kidogo sana kama unapaswa kutumia nafasi kamili au uwe na masuala ya nafasi ya ajabu kwa sehemu nyingine za ukurasa wako.

1. Weka picha kwenye ukurasa ambao nataka kutumia kama historia.

2. Katika karatasi ya mtindo, weka upana na urefu wa picha. Kumbuka, unaweza kutumia asilimia kwa upana au urefu, lakini ninaona ni rahisi kurekebisha na maadili ya urefu kwa urefu.

   img # bg {
   upana: 20m;
   urefu: 30m;
   }

3. Weka maudhui yako katika div na maudhui ya "id" kama tulivyofanya hapo juu:

   Maudhui yako yote hapa

4. Weka div maudhui kuwa sawa upana na urefu kama picha background:

   div # maudhui {
   upana: 20m;
   urefu: 30m;
   }

5. Kisha nafasi ya maudhui hadi urefu sawa na picha. Kwa hiyo kama picha yako ni 30m utakuwa na mtindo wa juu: -30; Usisahau kuweka z-index ya 1 kwenye maudhui.

   #content {
   msimamo: jamaa;
   juu: -30;
   z-index: 1;
   upana: 20m;
   urefu: 30m;
   }

6. Kisha ongeza kwenye z-index ya -1 kwa watumiaji wa IE 6, kama ulivyofanya hapo juu:

Tena, kwa ukubwa wa background unafurahia usaidizi mkubwa wa kivinjari sasa unafanya, mbinu hii pia inawezekana sana na inawasilishwa kama bidhaa ya zama zilizopita. Ikiwa unataka kutumia mbinu hii, hakika uhakikishe kupima hii katika browsers kama wengi iwezekanavyo.

Na kama maudhui yako yanabadilika ukubwa, utahitaji kubadilisha ukubwa wa chombo chako na picha ya asili, vinginevyo, utakuwa na matokeo ya ajabu.