Ki jan yo Detire yon Imaj Istorik nan Fit yon paj entènèt

Bay sit entènèt ou vizyèl enterè ak grafik background

Imaj yo se yon pati enpòtan nan desen sit entènèt atire. Sa a gen ladan itilize nan imaj background. Sa yo se imaj yo ak grafik ki yo te itilize dèyè zòn nan yon paj kòm opoze a imaj ke yo prezante kòm yon pati nan paj sa yo kontni. Imaj sa yo ka ajoute enterè vizyèl nan yon paj epi ede ou reyalize konsepsyon vizyèl la ke ou ka kap chèche sou yon paj.

Si ou kòmanse travay ak imaj background, ou pral san dout kouri antre nan senaryo a kote ou vle yon imaj detire nan anfòm paj la.

Sa a se laverite espesyalman pou sit entènèt reponn ke yo te lage nan yon pakèt domèn aparèy ak gwosè ekran .

Dezi sa a detire yon imaj background se yon dezi trè komen pou konsèpteur entènèt paske se pa tout imaj adapte nan espas ki la nan yon sit entènèt. Olye pou yo mete yon gwosè fiks, etann imaj la pèmèt li nan flèks nan anfòm paj la pa gen pwoblèm ki jan lajè oswa etwat fenèt navigatè a se.

Pi bon fason yo detire yon imaj nan anfòm background nan nan yon paj se yo sèvi ak pwopriyete a CSS3 , pou background-gwosè. Isit la se yon egzanp ki sèvi ak yon imaj background pou kò a nan yon paj ak ki kouche gwosè a 100% konsa ke li ap toujou detire anfòm ekran an.

kò {
background: url (bgimage.jpg) pa gen okenn-repete;
background-gwosè: 100%;
}}

Dapre caniuse.com, pwopriyete sa a ap travay nan IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, ak sou tout pi gwo navigatè mobil yo. Sa a kouvri ou pou tout navigatè yo modèn ki disponib jodi a, ki vle di ou ta dwe itilize pwopriyete sa a san yo pa pè ke li pa pral travay sou ekran yon moun.

Fikse yon Istorik etann nan pi ansyen navigateurs

Li trè fasil ke ou ta bezwen sipòte nenpòt navigatè ki gen plis pase IE9, men se pou yo asime ke w ap konsène ke IE8 pa sipòte pwopriyete sa a. Nan ki egzanp, ou ka fo yon background lonje. Epi ou ka itilize prefiks yo navigatè pou Firefox 3.6 (-moz-background-size) ak Opera 10.0 (-o-background-gwosè).

Fason ki pi fasil nan fo yon imaj background lonje se detire li atravè paj la tout antye. Lè sa a, ou pa fini ak espas siplemantè oswa gen enkyete ke tèks ou adapte nan zòn nan lonje. Men ki jan fè li:

id = "bg" />

1. Premye, asire w ke tout navigatè gen yon wotè 100%, 0 marges, ak 0 padding sou eleman yo BODY HTML. Mete bagay sa yo nan tèt dokiman HTML ou:

2. Add imaj la ou vle yo dwe background nan kòm eleman nan premye nan paj wèb la, epi bay li id la nan "bg":

3. Pozisyon imaj la background konsa ke li se fiks nan tèt la ak bò gòch ak se 100% lajè ak 100% nan wotè. Add sa a fèy style ou a:

   img # bg {
   pozisyon: fiks;
   tèt: 0;
   kite: 0;
   lajè: 100%;
   wotè: 100%;
   }}

4. Add tout kontni ou nan paj anndan yon eleman DIV ak yon id nan "kontni". Add DIV anba a imaj la:

   Tout kontni ou isit la - ki gen ladan Tèt, paragraf, elatriye.

   Remak: li enteresan gade nan paj ou an kounye a. Imaj la ta dwe montre lonje soti, men kontni ou se konplètman ki manke. Poukisa? Paske imaj la background se 100% nan wotè, ak divizyon nan kontni se apre imaj la nan koule nan dokiman an - pi navigatè pa pral montre li.
   
5. Pozisyon kontni ou pou ke li se relatif e li gen yon z-endèks nan 1. Sa a pral pote l 'pi wo a imaj la background nan navigatè estanda-konfòme. Add sa a fèy style ou a:

   #content {
   pozisyon: relatif;
   z-endèks: 1;
   }}

1. Men, ou pa fè. Internet Explorer 6 pa estanda konfòme e toujou gen kèk pwoblèm. Gen plizyè fason pou kache CSS la nan chak navigatè men IE6, men pi fasil (ak pi piti chans pou lakòz lòt pwoblèm) se pou itilize kòmantè kondisyonèl. Mete sa ki annapre yo apre stil ou nan tèt dokiman ou:

2. Anndan kòmantè a make, ajoute yon lòt fèy style ak kèk Styles jwenn IE 6 yo jwe bèl:

3. Asire ou ke ou teste nan IE 7 ak IE 8 kòm byen. Ou ka bezwen ajiste kòmantè yo pou sipòte yo tou. Sepandan, li te travay lè mwen teste li.

OK - sa a se Byensir WAY overkill. Trè kèk sit bezwen sipòte IE 7 oswa 8 ankò, anpil mwens IE6!

Kòm sa yo, apwòch sa a se antik epi li pa nesesè pou ou. Mwen kite l 'isit la plis kòm yon modèl nan kiryozite kòm kouman pi difisil bagay sa yo te devan tout navigatè nou yo te jwe konsa joliman ansanm!

Fikse yon Imaj Istorik Detire sou yon espas ki pi piti

Ou ka itilize yon teknik menm jan an fo yon imaj background lonje atravè yon DIV oswa yon lòt eleman nan paj entènèt ou an. Sa a se yon ti jan trickier jan ou gen swa sèvi ak absoli pwezante oswa gen pwoblèm etranj espas pou lòt pati nan paj ou an.

1. Mete imaj la sou paj la ke mwen vle itilize kòm background nan.

2. Nan fèy la style, mete yon lajè ak wotè pou imaj la. Remak, ou ka itilize pousantaj pou lajè oswa wotè, men mwen jwenn li pi fasil yo ajiste ak valè longè pou wotè a.

   img # bg {
   lajè: 20em;
   wotè: 30em;
   }}

3. Mete kontni ou nan yon div ak "kontni" id jan nou te fè pi wo a:

   Tout kontni ou isit la

4. Style kontni div yo dwe lajè a menm ak wotè kòm imaj la background:

   div # kontni {
   lajè: 20em;
   wotè: 30em;
   }}

5. Lè sa a, pozisyon kontni a jiska wotè a menm jan ak imaj la. Se konsa, si imaj ou se 30em ou ta gen yon style nan tèt: -30em; Pa bliye mete yon z-endèks nan 1 sou kontni an.

   #content {
   pozisyon: relatif;
   tèt: -30em;
   z-endèks: 1;
   lajè: 20em;
   wotè: 30em;
   }}

6. Lè sa a, ajoute nan yon z-endèks nan -1 pou itilizatè IE 6, jan ou te fè pi wo a:

Ankò, ak gwosè background jwi sipò navigatè a laj li kounye a fè sa, apwòch sa a se tou anpil chans nesesè epi prezante kòm yon pwodwi nan yon epòk ansyin. Si ou te vle itilize apwòch sa a, jis asire w ke ou teste sa a nan kòm anpil navigatè jan ou kapab.

Men, si kontni ou chanje gwosè, ou pral bezwen chanje gwosè a nan veso ou ak imaj background, otreman, ou pral fini ak rezilta etranj.