Mmene Mungatambitsire Chithunzi Chakumbuyo Kuti Mulowetse Tsamba la Webusaiti

Perekani webusaiti yanu chidwi ndi zithunzi zakuda

Zithunzi ndi mbali yofunika kwambiri ya makonzedwe okongola a webusaiti. Izi zikuphatikizapo kugwiritsa ntchito zithunzi zam'mbuyo. Awa ndi zithunzi ndi zithunzi zomwe zimagwiritsidwa ntchito kumbuyo kwa tsamba kusiyana ndi mafano omwe akufotokozedwa ngati gawo la masamba okhutira. Zithunzi izi zitha kuwonjezera chidwi pa tsamba ndi kukuthandizani kukwaniritsa zojambulajambula zomwe mukuyembekezera pa tsamba.

Ngati mutayamba kugwira ntchito ndi zithunzi zam'mbuyo, mosakayikira mudzatengera zochitika zomwe mukufuna kuti fano lidzatambasulidwe.

Izi ndizofunikira makamaka kwa mawebusaiti omwe amvetsera omwe akuperekedwa kuzinthu zosiyanasiyana zamakono ndi mazenera .

Ichi chofuna kutambasula chithunzi chachilendo ndi chilakolako chofala kwambiri kwa opanga ma webusaiti chifukwa sizithunzi zonse zimagwirizana ndi malo a webusaitiyi. M'malo moyika kukula kwake, kutambasula fano kumaloleza kusinthasintha kuti zigwirizane ndi tsambalo mosasamala kaya zenera kapena zochepa zowonekera pazenera .

Njira yabwino yotambasulira fano kuti igwirizane ndi maziko a tsamba ndi kugwiritsa ntchito katundu wa CSS3 , chifukwa cha kukula kwa msinkhu. Pano pali chitsanzo chomwe chimagwiritsa ntchito chithunzi chakumbuyo kwa thupi la tsamba ndi zomwe zimapanga kukula kwa 100% kotero kuti zidzatambasula nthawi zonse kuti zizigwirizana ndizenera.

thupi {
maziko: url (bgimage.jpg) palibe-kubwereza;
msinkhu-kukula: 100%;
}}

Malinga ndi caniuse.com, malowa amagwira ntchito mu IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, komanso pazithukukulu zonse zamtundu. Izi zikukukhudzani pa zamasamba onse zamakono zomwe zilipo masiku ano, zomwe zikutanthauza kuti muyenera kugwiritsa ntchito malowa popanda mantha kuti sangagwire ntchito pazithunzi za wina.

Kujambula Chidutswa Chotsimikizika mu Osewera Achikulire

Sitikukayikira kuti mungafunikire kuthandizira asakatuli onse okalamba kuposa IE9, koma tiyerekeze kuti mukudandaula kuti IE8 sichichirikiza katundu uyu. Pa nthawiyi, mukhoza kutsegula maziko otambasuka. Ndipo mungagwiritse ntchito prefixes ya Browser 3.6 (-moz-background-size) ndi Opera 10.0 (-o-background-size).

Njira yosavuta yowonongera chithunzithunzi chakumbuyo ndichokutambasula tsamba lonselo. Ndiye simungathe kukhala ndi malo owonjezera kapena muyenera kudandaula kuti nkhani yanu ikugwirizana ndi dera lanulo. Nazi momwe mungachitire:

id = "bg" />

1. Choyamba, onetsetsani kuti masakatuli onse ali ndi 100% kutalika, mazenera 0, ndi 0 padding pazomwe zili ndi HTML BODY. Ikani zotsatirazi pamutu wa chilemba chanu cha HTML:

2. Onjezerani chithunzi chomwe mukufuna kukhala maziko monga choyamba pa tsamba la webusaiti, ndipo perekani id ya "bg":

3. Sungani chithunzi chakumbuyo kuti chikhazikike pamwamba ndi kumanzere ndipo chiri 100% m'lifupi ndi 100% msinkhu. Onjezerani izi pa pepala lanu la kalembedwe:

   img # bg {
   udindo: wokhazikika;
   pamwamba: 0;
   kumanzere: 0;
   m'lifupi: 100%;
   kutalika: 100%;
   }}

4. Onjezerani zonse zomwe muli nazo pa tsamba mkati mwa chinthu cha DIV chokhala ndi "zokwanira". Onjezerani DIV pansipa fano:

   Zonse zomwe muli pano - kuphatikizapo mutu, ndime, ndi zina.

   Zindikirani: Ndizosangalatsa kuyang'ana tsamba lanu tsopano. Chithunzichi chiyenera kuwonetsedwa, koma zomwe zilipo zikusowa. Chifukwa chiyani? Chifukwa chithunzi chakumbuyo chili kutalika kwa 100%, ndipo kugawikana komweku kuli pambuyo pa chithunzi pakutuluka kwa chilembedwe - osatsegula ambiri sangawonetse.
   
5. Sungani zinthu zanu kuti zikhale zachibale ndipo zili ndi zolemba za 1. Zidzakhala pamwamba pa chithunzi chakumbuyo pamasitepe ovomerezeka. Onjezerani izi pa pepala lanu la kalembedwe:

   #content {
   udindo: wachibale;
   zolemba: 1;
   }}

1. Koma simunachite. Internet Explorer 6 sizinthu zoyenera komanso zimakhala ndi mavuto ena. Pali njira zambiri zobisa CSS kuchokera kwa osatsegula aliyense koma IE6, koma zosavuta (ndizosavuta kuti zibweretse mavuto ena) ndizogwiritsa ntchito ndemanga zovomerezeka. Ikani zotsatirazi pambuyo pa mafilimu anu pamutu wa chikalata chanu:

2. M'kati mwa ndemanga yowonjezedwa, yonjezerani pepala lina lamasewero ndi mafashoni ena kuti IE 6 izisewera bwino:

3. Onetsetsani kuti muyesedwe mu IE 7 komanso IE 8 komanso. Mungafunikire kusintha ndemanga kuti muwathandize. Komabe, zinagwira ntchito ndikayesa.

Chabwino - izi ndizowonjezera. Malo ochepa kwambiri amafunika kuthandizira IE 7 kapena 8, mocheperapo IE6!

Momwemonso, njirayi imakhala yosasinthika ndipo sikukufunikira kwa inu. Ndikusiyira pano ngati chitsanzo cha chidwi chofuna kuti zinthu zinkakhala zovuta bwanji masabata onsewa atasewera bwino.

Kujambula Chithunzi Chachidutswa Chodutsa Pamtunda Wochepa

Mungagwiritse ntchito njira yomweyi kuti muwononge chithunzi chakumbuyo ku DIV kapena chinthu china pa tsamba lanu la intaneti. Izi ndi zovuta kwambiri monga muyenera kugwiritsira ntchito mndandanda wazomwe mukukhala kapena kukhala ndi malo osadziwika omwe muli mbali zina za tsamba lanu.

1. Ikani chithunzi pa tsamba limene ndikufuna kugwiritsa ntchito monga maziko.

2. Mu pepala lojambula, yikani m'lifupi ndi kutalika kwa fanolo. Onani, mungagwiritse ntchito maperesenti kuti m'lifupi kapena kutalika, koma ndikuona kuti ndizosintha kusintha ndi kutalika kwa miyezo ya kutalika.

   img # bg {
   width: 20em;
   kutalika: 30m;
   }}

3. Ikani zokha zanu mu div ndi id "zokhutira" monga momwe tawonera pamwambapa:

   Zonse zomwe muli pano

4. Sinthani zinthu div kuti zikhale zofanana m'lifupi ndi msinkhu monga chithunzi chakumbuyo:

   div # contenu {
   width: 20em;
   kutalika: 30m;
   }}

5. Kenaka muyike zomwe zili pamtunda mofanana ndi chithunzichi. Kotero ngati fano lanu liri 30em mutakhala ndi kalembedwe ka pamwamba: -30; Musaiwale kuyika z-ndandanda ya 1 pa zomwe zili.

   #content {
   udindo: wachibale;
   pamwamba: -30;
   zolemba: 1;
   width: 20em;
   kutalika: 30m;
   }}

6. Kenaka yonjezerani mndandanda wa z-1 kwa ogwiritsa ntchito a IE 6, monga mudapitira pamwambapa:

Apanso, ndi kukula kwa msinkhu wamasewera omwe akusangalala nawo pakadali pano, njirayi imakhalanso yosafunikira ndipo ikuwonetsedwa ngati yowonongeka. Ngati mukufuna kugwiritsa ntchito njirayi, onetsetsani kuti mukuyesa izi muzithukuta zambiri momwe mungathere.

Ndipo ngati zokhutira zanu zisintha kukula, muyenera kusintha kukula kwa chidebe chanu ndi chithunzi chakumbuyo, mwinamwake, mutha ndi zotsatira zosadziwika.