Kaip ištiesti foninį vaizdą tinklalapiui

Suteikite savo svetainę vizualų susidomėjimą fono grafika

Vaizdai yra svarbi patrauklių svetainių dizaino dalis. Tai apima fono vaizdų naudojimą. Tai vaizdai ir grafika, kurie naudojami už puslapio sričių, o ne vaizdų, kurie pateikiami kaip turinio puslapių dalis. Šie fono paveikslėliai gali palengvinti vizualų puslapio susidomėjimą ir padėti pasiekti vizualų dizainą, kurį gali ieškoti puslapyje.

Jei pradėsite dirbti su fono vaizdais, neabejotinai pateksite į scenarijų, kuriame norite, kad vaizdas atitiktų puslapį.

Tai ypač aktualu jautrioms svetainėms, kurios tiekiamos įvairioms įrenginiams ir ekrano dydžiui .

Šis noras ištiesti fono vaizdą yra labai dažnas web dizainerių noras, nes ne kiekvienas vaizdas tinka svetainės erdvėje. Vietoj to, kad nustatytumėte nustatytą dydį, ištieskite vaizdą, kad jis būtų lankstus, kad tilptų į puslapį, nesvarbu, koks plotis ar siauras yra naršyklės langas .

Geriausias būdas ištiesti vaizdą, kad tilptų puslapio fone, yra naudoti CSS3 nuosavybę fono dydžiui. Čia pateikiamas pavyzdys, kuris naudoja fono paveikslėlį puslapio korpuse ir kuris nustato dydį iki 100%, kad jis visada tęstųsi, kad atitiktų ekraną.

kūnas {
fonas: url (bgimage.jpg) no-repeat;
fono dydis: 100%;
}

Pasak "caniuse.com", ši nuosavybė veikia "IE 9+", "Firefox 4+", "Opera 10.5+", "Safari 5+", "Chrome 10.5+" ir visose pagrindinėse naršyklėse mobiliesiems. Tai apima visas šiandien galimas šiuolaikines naršykles, o tai reiškia, kad turėtumėte naudoti šį turtą, nebijodami, kad jis neveikia ekrane.

Ankstesniuose naršyklėse suklijuokite ištemptą foną

Labai mažai tikėtina, kad jums reikės palaikyti bet kokias naršykles, senesnes nei IE9, tačiau darome prielaidą, kad esate susirūpinę, kad IE8 nepalaiko šio turto. Tuo atveju galite suklastoti ištemptą foną. Galite naudoti naršyklės prefiksus Firefox 3.6 (-moz-fono dydžio) ir "Opera 10.0" (-o-fono dydis).

Lengviausias būdas suklastoti ištemptą fono vaizdą yra ištiesti visą puslapį. Tada jūs nepadarysite papildomos vietos arba turėsite nerimauti, kad jūsų tekstas tinka įtemptoje srityje. Štai kaip tai padaryti:

id = "bg" />

1. Pirmiausia įsitikinkite, kad visose naršyklėse yra 100% aukščio, 0 tarpai ir 0 užpildymas elementuose ir HTML BODY. Įdėkite žemiau esantį HTML dokumento galą:

2. Pridėkite vaizdą, kurį norite sukurti kaip pirmą interneto puslapio elementą, ir nurodykite jį "bg":

3. Įdėkite fono vaizdą taip, kad jis būtų fiksuotas viršuje ir kairėje ir yra 100% pločio ir 100% aukščio. Pridėti tai savo stiliaus lape:

   img # bg {
   vieta: fiksuota;
   viršuje: 0;
   kairėje: 0;
   plotis: 100%;
   aukštis: 100%;
   }

4. Pridėti visą turinį į DIV elemento vidinį puslapį su "turinio" ID. Įtraukite DIV žemiau paveikslėlio:

   Visas turinys čia - įskaitant antraštes, pastraipas ir tt

   Pastaba: įdomu pažvelgti į jūsų puslapį dabar. Vaizdas turėtų būti ištemptas, bet jūsų turinys visiškai trūksta. Kodėl? Kadangi fono paveikslėlis yra 100% aukščio, o turinio dalis yra po to, kai dokumentas yra srautas, dauguma naršyklių jo nebus rodomi.
   
5. Padėkite savo turinį taip, kad jis būtų santykinis ir jame yra 1 z indeksas . Tai padidins standartines naršykles virš fono paveikslėlio. Pridėti tai savo stiliaus lape:

   #turinys {
   pozicija: santykinė;
   z indeksas: 1;
   }

1. Bet tu nesibaigei. Internet Explorer 6 neatitinka standartų ir vis dar turi tam tikrų problemų. Yra daug būdų slėpti CSS iš kiekvienos naršyklės, bet IE6, tačiau paprasčiausias (ir mažiausiai tikėtina, kad tai sukelia kitas problemas) yra naudoti sąlygines pastabas. Įdėkite šiuos po savo lentelės stilių savo dokumento galvoje:

2. Išskirtinio komentaro viduje pridėti kitą stilių lentelę su kai kuriais stiliais, norėdami, kad "IE 6" būtų gražus:

3. Būtinai testuokite IE 7 ir IE 8. Jums gali prireikti koreguoti komentarus, kad juos palaikytų. Tačiau jis dirbo, kai jį išbandžiau.

Gerai - tai, be abejo, WAY overkill. Labai nedaug svetainių turi palaikyti IE 7 ar 8, daug mažiau IE6!

Todėl šis požiūris yra senovinis ir gali būti nereikalingas jums. Aš palieku jį čia labiau kaip smalsumo modelį, kiek sudėtingesnių dalykų buvo prieš visas mūsų naršykles grojo taip gražiai kartu!

Fikcijos ištempto foninio vaizdo per mažesnę erdvę

Galite naudoti panašią techniką, kad suklastytumėte ištemptą fono vaizdą per DIV arba kitą elementą savo tinklalapyje. Tai šiek tiek sudėtingiau, nes jūs turite naudoti absoliučią poziciją arba turėtumėte keistų tarpų problemų kitoms jūsų puslapio dalims.

1. Įdėkite vaizdą į puslapį, kurį noriu naudoti kaip foną.

2. Į stiliaus lapą nustatykite vaizdui plotį ir aukštį. Atkreipkite dėmesį, kad galite naudoti procentus už plotį arba aukštį, bet aš manau, kad lengviau pritaikyti aukščio ilgio reikšmes.

   img # bg {
   plotis: 20em;
   aukštis: 30em;
   }

3. Pateikite turinį div su id "turiniu", kaip tai padarėme aukščiau:

   Visas turinys čia

4. Stiliaus turinys div turi būti tokio paties pločio ir aukščio kaip fono vaizdas:

   div # content {
   plotis: 20em;
   aukštis: 30em;
   }

5. Tada padėkite turinį iki to paties aukščio kaip ir vaizdas. Taigi, jei jūsų vaizdas yra 30em, jūs turėtumėte stiliaus viršuje: -30em; Nepamirškite įdėti z-indeksą 1 į turinį.

   #turinys {
   pozicija: santykinė;
   viršų: -30em;
   z indeksas: 1;
   plotis: 20em;
   aukštis: 30em;
   }

6. Tada pridėti z-indeksą -1 IE 6 vartotojams, kaip jūs aukščiau:

Vėlgi, naudojant fono dydį, naudojančią platų naršyklių palaikymą, dabar šis metodas yra labai nereikalingas ir pateikiamas kaip praeities eros produktas. Jei norėjote naudoti šį metodą, būtinai patikrinkite tai tiek daug naršyklių, kiek galite.

Jei jūsų turinys keičia dydį, turėsite pakeisti konteinerio dydį ir fono paveikslėlį, priešingu atveju pasidarys keistų rezultatų.