Unsaon Pag-uswag ang Imahen sa Paghulagway sa Pagkahimong usa ka Web Page

Hatagi ang imong web visual interest uban sa background graphics

Ang mga imahe usa ka importante nga bahin sa madanihon nga mga disenyo sa website. Kini naglakip sa paggamit sa mga hulagway sa background. Kini ang mga hulagway ug mga hulagway nga gigamit sa likod sa mga bahin sa usa ka pahina nga sukwahi sa mga hulagway nga gipresentar isip kabahin sa mga pahina sa sulod. Kini nga mga hulagway sa background mahimong makadugang sa biswal nga interes sa usa ka panid ug makatabang kanimo sa pagkab-ot sa visual nga disenyo nga tingali imong gipangita sa usa ka panid.

Kung magsugod ka nga magtrabaho uban sa mga hulagway sa background, sa walay duhaduha modagan ka sa sitwasyon kung asa nimo gusto ang usa ka imahen nga mohaum aron mahaum ang panid.

Tinuod kini ilabi na alang sa mga responsive nga mga website nga gipadala ngadto sa nagkalainlaing mga gamit ug mga gidak-on sa screen .

Kini nga tinguha sa pag-uswag sa usa ka hulagway sa background mao ang usa ka komon nga tinguha alang sa mga tigdisenyo sa web tungod kay dili ang tanan nga hulagway mohaum sa luna sa usa ka website. Sa baylo nga maghimo og saktong gidak-on, ang pagbukhad sa hulagway nagtugot nga kini magisi sa pagsumpay sa panid bisan unsa ka lapad o pig-ot ang bintana sa browser .

Ang pinakamaayong paagi sa pag-igo sa usa ka hulagway nga mohaum sa background sa usa ka panid mao ang paggamit sa property sa CSS3 , alang sa gidak-on sa background. Ania ang usa ka pananglitan nga naggamit sa usa ka hulagway sa hulagway alang sa lawas sa usa ka panid ug nga nagbutang sa gidak-on ngadto sa 100% aron kini kanunay mag-abot aron mahaum sa screen.

lawas {
background: url (bgimage.jpg) no-repeat;
pananglitan-gidak-on: 100%;
}

Sumala sa caniuse.com, kini nga propidad naglihok sa IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, ug sa tanan nga mga nag-una nga mga mobile browsers. Kini naglangkob kanimo alang sa tanan nga mga modernong mga browser nga magamit karon, nga nagpasabut nga kinahanglan nimo kining gamiton nga walay kahadlok nga dili kini magamit sa screen sa usa ka tawo.

Pagpalayo sa usa ka Nagtubo nga Background sa Older Browsers

Kini dili tingali nga kinahanglan nimo nga suportahan ang bisan unsang mga browser nga mas karaan kay sa IE9, apan huna-hunaa nga nabalaka ka nga ang IE8 wala mosuporta niini nga propiedad. Nianang higayona, mahimo nimo nga peke ang background. Ug mahimo nimong gamiton ang prefix sa browser alang sa Firefox 3.6 (-moz-background-size) ug Opera 10.0 (-o-background-size).

Ang labing sayon ​​nga paagi sa peke nga hulagway nga background mao ang pagtuyok niini sa tibuok panid. Dayon dili ka mahuman sa dugang nga luna o kinahanglan nga mabalaka nga ang imong teksto mohaum sa hinay-hinay nga lugar. Ania kung giunsa kini pagbuhat:

id = "bg" />

1. Una, siguroa nga ang tanan nga mga browser adunay 100% nga gitas-on, 0 margin, ug 0 padding sa elemento ug HTML BODY elements. Ibutang ang mosunod sa ulo sa imong HTML nga dokumento:

2. Idugang ang hulagway nga gusto nimo mahimong background ingon nga unang elemento sa web page, ug ihatag kini nga id sa "bg":

3. Ibutang ang hulagway sa background aron kini ma-ayo sa ibabaw ug sa wala ug 100% ang gilapdon ug 100% ang gitas-on. Idugang kini sa imong style sheet:

   img # bg {
   posisyon: natino;
   ibabaw: 0;
   wala: 0;
   gilapdon: 100%;
   gitas-on: 100%;
   }

4. Idugang ang tanan nimong sulod ngadto sa panid sa sulod sa usa ka elemento sa DIV nga adunay id nga "sulod". Idugang ang DIV sa ubos sa hulagway:

   Ang tanan nimong sulod dinhi - lakip ang mga ulohan, parapo, ug uban pa.

   Mubo nga sulat: kini makapaikag nga tan-awon ang imong panid karon. Ang larawan kinahanglan ipakita nga gituy-od, apan ang imong sulod hingpit nga nawala. Ngano? Tungod kay ang hulagway sa kasulatan mao ang 100% sa gitas-on, ug ang pagbahin sa sulod mao ang hulagway sa dagway sa dokumento - kadaghanan sa mga browser dili mopakita niini.
   
5. Ibutang ang imong sulod aron kini nga paryente ug adunay usa ka z-index sa 1. Kini magdala niini sa ibabaw sa hulagway nga hulagway sa mga sumbanan nga nagsunod sa mga sumbanan. Idugang kini sa imong style sheet:

   #content {
   posisyon: paryente;
   z-index: 1;
   }

1. Apan wala ka nahimo. Ang Internet Explorer 6 dili mga sumbanan nga nagsunod ug adunay pipila ka mga problema. Adunay daghang mga paagi sa pagtago sa CSS gikan sa matag browser apan IE6, apan ang labing sayon ​​(ug labing gamay nga lagmit nga maoy hinungdan sa ubang mga problema) mao ang paggamit sa conditional comments. Ibutang ang mosunod human sa imong stylesheet sa ulo sa imong dokumento:

2. Diha sa gipasiugda nga komento, pagdugang sa laing style sheet uban ang pipila ka mga estilo aron makuha ang IE 6 aron magdula og maayo:

3. Siguroha ang pagsulay sa IE 7 ug IE 8 ingon man. Mahimo nimo kinahanglan nga usbon ang mga komentaryo aron sa pagsuporta kanila. Apan, kini nagtrabaho sa dihang gisulayan ko kini.

OK - kini giangkon nga PANGLAWAS nga overkill. Diyutay nga mga site ang kinahanglan nga mosuporta sa IE 7 o 8 na, dili kaayo IE6!

Tungod niini, kini nga pamaagi anam-anam ug dili kinahanglanon alang kanimo. Gibiyaan ko kini dinhi isip usa ka modelo sa pagkamausisaon kung unsa pa ka lisud nga mga butang sa wala pa ang tanan nga among mga dula nga magdula nga maayo nga magkauban!

Pagpalayo sa usa ka Masulub-ong Lig-on nga Background sa usa ka Gamay nga Luna

Mahimo nimo gamiton ang susama nga teknik sa peke nga hulagway sa background sa usa ka DIV o laing elemento sa imong web page. Kini usa ka gamay nga kalisud sama sa imong paggamit sa hingpit nga posisyon o adunay lain nga mga isyu sa spacing alang sa ubang mga bahin sa imong panid.

1. Ibutang ang hulagway sa panid nga gusto nakong gamiton ingon nga background.

2. Sa style sheet, ibutang ang usa ka gilapdon ug gitas-on alang sa imahe. Hinumdomi, mahimo nimo gamiton ang mga porsiyento sa gilapdon o gitas-on, apan mas sayon ​​ang pag-adjust sa mga gitas-on sa gitas-on alang sa gitas-on.

   img # bg {
   gilapdon: 20em;
   gitas-on: 30em;
   }

3. Ibutang ang imong sulod sa usa ka div nga adunay id nga "sulod" sama sa among gibuhat sa ibabaw:

   Ang tanan nimong sulod dinhi

4. Sulati ang sulod nga dibuho nga parehas ang gilapdon ug gitas-on sama sa hulagway sa background:

   div # content {
   gilapdon: 20em;
   gitas-on: 30em;
   }

5. Dayon i-posisyon ang sulod sa sama nga gitas-on sama sa imahe. Busa kung ang imong dagway mao ang 30em ikaw adunay estilo sa ibabaw: -30em; Ayaw kalimti ang pagbutang sa z-index sa 1 sa sulod.

   #content {
   posisyon: paryente;
   ibabaw: -30em;
   z-index: 1;
   gilapdon: 20em;
   gitas-on: 30em;
   }

6. Dayon dugangi ang z-index sa -1 alang sa IE 6 nga mga tiggamit, sama sa gibuhat mo sa ibabaw:

Pag-usab, nga adunay gidak-on nga kasinatian nga nagpahimulos sa halapad nga suporta sa browser kini karon, kini nga pamaagi usab lagmit dili kinahanglanon ug gipresentar isip usa ka produkto sa usa ka panahon nga karaan. Kon gusto nimong gamiton kini nga paagi, siguruha nga sulayan kini sa daghang mga browser kutob sa imong mahimo.

Ug kung ang imong sulod mausab ang gidak-on, kinahanglang usbon nimo ang gidak-on sa imong sudlanan ug ang hulagway sa likod, kung dili, imong mahuman ang mga katingad-an nga resulta.