Kā pagarināt fona attēlu, lai tas atbilstu tīmekļa lapai

Dodiet savai vietnei vizuālu interesi ar fona grafiku

Attēli ir svarīga pievilcīgu vietņu dizainu sastāvdaļa. Tas ietver fona attēlu izmantošanu. Tie ir attēli un grafika, kas tiek izmantoti lapas aizmugurē , nevis attēliem, kas ir iekļauti satura lapās. Šie fona attēli var pievienot vizuālo interesi par lapu un palīdz jums sasniegt vizuālo dizainu, ka jūs varētu atrast lapā.

Ja jūs sākat strādāt ar fona attēliem, jūs neapšaubāmi nonāksiet scenārijā, kurā vēlaties, lai attēls tiktu stiepts atbilstoši lapai.

Tas jo īpaši attiecas uz jutīgām vietnēm, kuras tiek piegādātas dažādām ierīcēm un ekrāna izmēriem .

Šī vēlme izstumt fona attēlu ir ļoti izplatīta web dizaineru vēlēšanās, jo ne katrs tēls iekļaujas tīmekļa vietnes telpā. Tā vietā, lai iestatītu fiksētu izmēru, attēla pagarināšana ļauj tai pielāgoties lapai neatkarīgi no tā, cik platā vai sašaurinātas pārlūka logs .

Labākais veids, kā izstiepties attēlu, lai tas atbilstu lapas fonsi, ir izmantot CSS3 īpašumu fona izmēra dēļ. Šeit ir piemērs, kurā lapas fonā tiek izmantots fona attēls, un tas nosaka izmēru līdz 100%, lai tas vienmēr stieptu uz ekrāna.

ķermenis {
fons: url (bgimage.jpg) no-repeat;
fona izmērs: 100%;
}

Saskaņā ar caniuse.com, šis īpašums darbojas IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ un visās galvenajās mobilajās pārlūkprogrammās. Tas attiecas uz visām mūsdienu mūsdienu pārlūkprogrammām, kas nozīmē, ka jums vajadzētu izmantot šo īpašumu, nebaidoties, ka tas nedarbosies kāda ekrāna vietā.

Vecāku pārlūkprogrammu fiksēšana izstieptajā fonā

Ir maz ticams, ka jums būs jāatbalsta visas pārlūkprogrammas, kas vecākas par IE9, taču pieņemsim, ka jūs uztraucaties, ka IE8 neatbalsta šo īpašumu. Šajā gadījumā jūs varat viltus izstiepts fons. Un jūs varat izmantot pārlūkprogrammas prefiksus pārlūkprogrammai Firefox 3.6 (-moz-fona izmērs) un Opera 10.0 (-fons-fons).

Vieglākais veids, kā vilkt izstieptu fona attēlu, ir izstiepties visā lapā. Tad jums nav nevajadzīgas vietas vai jāuztraucas, ka jūsu teksts iekļaujas izstieptajā zonā. Lūk, kā to izdarīt:

id = "bg" />

1. Vispirms pārliecinieties, vai visās pārlūkprogrammās ir 100% augstums, 0 maržas un 0 polsterējums elementos un HTML BODY. Ievietojiet HTML dokumenta galā šādu tekstu:

2. Pievienojiet attēlu, kurā vēlaties būt fons, kā pirmo tīmekļa lapas elementu, un piešķiriet tam "bg" id :

3. Novietojiet fona attēlu tā, lai tas būtu fiksēts augšā un kreisajā pusē, un tas ir 100% platums un 100% augstums. Pievienot to savai stila lapai:

   img # bg {
   pozīcija: fiksēta;
   top: 0;
   pa kreisi: 0;
   platums: 100%;
   augstums: 100%;
   }

4. Pievienojiet visu savu saturu lapai DIV elementā ar "satura" ID. Pievienojiet DIV zem attēla:

   Viss jūsu saturs šeit - tostarp galvenes, rindkopas utt.

   Piezīme. Ir interesanti apskatīt jūsu lapu tūlīt. Attēlam jābūt izstieptiem, taču jūsu saturs ir pilnīgi pazudis. Kāpēc Tā kā fona attēls ir 100% augstumā, un satura sadalījums ir pēc dokumenta plūsmas attēla - lielākā daļa pārlūkprogrammu to neparādīs.
   
5. Novietojiet savu saturu tā, lai tas būtu relatīvs, un tam ir z-indekss 1. Tas novedīs to virs standarta atbilstošu pārlūkprogrammu virs fona attēla. Pievienot to savai stila lapai:

   #content {
   pozīcija: radinieks;
   z-indekss: 1;
   }

1. Bet jūs neesat darīts. Internet Explorer 6 neatbilst standartiem, un joprojām ir dažas problēmas. Ir daudzi veidi, kā paslēpt CSS no katra pārlūkprogramma, bet IE6, taču vienkāršākais (un visticamāk radīs citas problēmas) ir izmantot nosacītus komentārus. Ievietojiet sekojošo pēc sava stilu tabulas dokumenta galā:

2. Ievērojamā komentāra iekšpusē pievienojiet vēl vienu stila lapu ar dažiem stiliem, lai IE 6 varētu spēlēt jauki:

3. Noteikti pārbaudiet arī IE 7 un IE 8. Jums var būt jāpielāgo komentāri, lai tos atbalstītu. Tomēr tas tika strādāts, kad es to izmēģināju.

Labi - tas, protams, ir WAY overkill. Ļoti maz vietnēm ir nepieciešams atbalstīt IE 7 vai 8 vairs, daudz mazāk IE6!

Tādējādi šī pieeja ir novecojusi un, iespējams, nevajadzīga jums. Es atstāju to šeit vairāk kā ziņkārības modelis par to, cik daudz sarežģītākas lietas bija pirms visu mūsu pārlūkprogrammu spēlēja tik labi kopā!

Faking izstiepts fona attēls pār mazāku telpu

Jūs varat izmantot līdzīgu paņēmienu, lai viltus izstieptu fona attēlu pāri DIV vai citam jūsu tīmekļa lapas elementam. Tas ir nedaudz sarežģītāk, jo jums ir jāizmanto absolūtais pozicionēšanas iestatījums vai jums ir dīvaini atstarpes jautājumi citām jūsu lapas daļām.

1. Novietojiet attēlu lappusē, kuru es gribu izmantot kā fonu.

2. Veidlapā iestatiet attēla platumu un augstumu. Ņemiet vērā, ka jūs varat izmantot procentuālās vērtības platumam vai augstumam, bet man ir vieglāk pielāgot augstuma garuma vērtības.

   img # bg {
   platums: 20em;
   augstums: 30em;
   }

3. Ievietojiet saturu divā ar id "saturu", kā mēs to izdarījām iepriekš:

   Viss jūsu saturs šeit

4. Stils saturam div ir tāds pats platums un augstums kā fona attēlam:

   div # saturs {
   platums: 20em;
   augstums: 30em;
   }

5. Tad ievietojiet saturu līdz tādam pašam augstumam kā attēlam. Tātad, ja jūsu attēls ir 30em, jums būtu top stils: -30em; Neaizmirstiet saturam ievietot z-indeksu 1.

   #content {
   pozīcija: radinieks;
   top: -30em;
   z-indekss: 1;
   platums: 20em;
   augstums: 30em;
   }

6. Tad pievienojiet z-indeksu -1 IE 6 lietotājiem, kā jūs to izdarījāt iepriekš:

Arī tagad, kad fona izmērs ir pieejams plašā pārlūkprogrammas atbalstam, šī pieeja ir ļoti iespējams nevajadzīga un tiek parādīta kā pagājušā laikmeta produkts. Ja jūs vēlētos izmantot šo pieeju, vienkārši pārliecinieties, lai to pārbaudītu pēc iespējas vairāk pārlūkprogrammu.

Un, ja jūsu saturs mainīs izmēru, jums būs jāmaina konteinera izmērs un fona attēls, pretējā gadījumā jūs saņemsiet dīvainus rezultātus.