Kuidas venitada taustpildi veebi lehele

Andke veebisaidile visuaalne huvi taustgraafika abil

Pildid on atraktiivsete veebisaitide kujundamise oluline osa. See hõlmab taustpildi kasutamist. Need on pildid ja graafika, mida kasutatakse lehe alade taustal , erinevalt piltidest, mis esitatakse sisulehtede osana. Need taustapildid võivad lisada lehele visuaalset huvi ja aidata teil saavutada visuaalset disaini, mida te lehel otsite.

Kui hakkate töötama taustpiltidega, satuvad te kahtlemata stsenaariumisse, kus soovite, et leht lehe kohale laieneks.

See kehtib eriti tundlike veebisaitide kohta, mida tarnitakse paljudele seadmetele ja ekraani suurustele .

See soov taustpildi venitada on veebispetsialistide jaoks väga tavaline soov, sest mitte iga pilt ei sobi veebisaidi ruumi. Selle asemel, et määrata kindlaksmääratud suurus, võimaldab pildi venitamine lehele sobib, olenemata sellest, kui lai ja kitsalt on see brauseri aken .

Parim viis lehe tausta sobimiseks kujutise venitada on kasutada taustformaadis CSS3 vara. Siin on näide, mis kasutab lehe kehale taustapilti ja mis määrab suuruse 100% -le, nii et see laieneb ekraanile alati.

keha {
taust: url (bgimage.jpg) no-repeat;
tausta suurus: 100%;
}

According to caniuse.com, see vara töötab IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ ja kõigis suuremates mobiilirakendustes. See hõlmab kõiki tänapäeval olemasolevaid kaasaegseid brausereid, mis tähendab, et peaksite seda vara kasutama, ilma et peaksite kartma, et see ei tööta kellegi ekraanil.

Vanemate brauseritega venitatud tausta fiktsioon

On väga ebatõenäoline, et peate toetama kõiki brauserit, mis on vanemad kui IE9, kuid oletame, et olete mures, et IE8 ei toeta seda vara. Sellisel juhul võite võltsida venitatud tausta. Ja saate kasutada Firefoxi 3.6 (-moz-tausta suurusega) ja Opera 10.0 (-o-tausta suurusega) brauseri eesliiteid .

Lihtsaim viis venitatud taustapildi võltsimiseks on selle kogu lehe sirutamine. Siis ei anna te enam ruumi ega pea muretsema, et teie tekst sobib venitatud alal. Selleks toimige järgmiselt.

id = "bg" />

1. Esmalt veenduge, et kõik brauserid on 100% kõrgusel, 0 marginaalsed ja 0 polsterdatud HTML-i ja BODY elementides. Asetage HTML-dokumendi päis järgmine tekst:

2. Veebilehe esimese elemendina lisage pilt, mida soovite taustaks teha, ja andke sellele "bg" ID :

3. Asetage taustpildi nii, et see oleks fikseeritud ülemisse ja vasakusse ning 100% lai ja 100% kõrgune. Lisage see oma stiilile:

   img # bg {
   asukoht: fikseeritud;
   top: 0;
   vasakule: 0;
   laius: 100%;
   kõrgus: 100%;
   }

4. Lisage kogu oma sisu DIV-elemendi lehele, mille sisu on id. Lisage pildi all olev DIV:

   Kogu teie sisu siin - sh päised, lõiked jne

   Märkus: on huvitav vaadata oma lehte kohe. Pilt peaks olema venitatud, kuid teie sisu on täiesti puudu. Miks? Kuna taustpildi pikkus on 100% ja sisu jagamine on pärast dokumendi voogu kujutist - enamik brauserit seda ei näita.
   
5. Asetage oma sisu nii, et see oleks suhteline ja sellel on z-indeks 1. See toob ta taustpilti kõrgemale standardialased brauserid. Lisage see oma stiilile:

   #sisu {
   asukoht: suhteline;
   z-indeks: 1;
   }

1. Kuid sa pole veel teinud. Internet Explorer 6 ei vasta standarditele ja on endiselt probleeme. CSS-i peitmiseks on kõikidel brauseritel, kuid IE6-l mitmesugused viisid, kuid kõige lihtsam (ja vähem tõenäoliselt tekitada muid probleeme) on tingimusteta kommentaaride kasutamine. Pange oma dokumendi peal oma stiil tabeli järgmiselt:

2. Esiletõstetud kommentaaride sees lisage mõned stiilid teise stiililehega, et IE 6 saaks kena mängida:

3. Veenduge, et proovite ka IE 7 ja IE 8. Võimalik, et peate kohandama kommentaare ka nende toetamiseks. Kuid see töötas siis, kui seda testitasin.

OK - see on tõesti WAY overkill. Väga vähestel saitidel on enam vaja IE 7 või 8, palju vähem IE6!

Sellisena on see lähenemine vananenud ja tõenäoliselt teie jaoks mittevajalik. Ma jätsin selle siin rohkem kui uudishimu mudeliks selle kohta, kui palju raskem asjad olid enne, kui kõik meie brauserid mängisid nii kenasti koos!

Pikendatud taustapildi fiktsioon väikeses ruumis

Saate kasutada sarnast tehnikat, et võltsida venitatud taustpildi DIV-i või mõne muu veebi lehe elemendi kaudu. See on natuke keerukam, kuna peate kasutama absoluutset positsioneerimist või omama lehe teistes osades kummalisi küsimusi.

1. Asetage pilt lehele, mida tahan kasutada.

2. Stiililehe jaoks määrake kujutise laius ja kõrgus. Pange tähele, et saate kasutada protsente laiuse või kõrguse kohta, kuid ma leian, et seda on kerge pikkuse väärtustega kohandada.

   img # bg {
   laius: 20em;
   kõrgus: 30em;
   }

3. Asetage oma sisu id-sse koos id-ga "sisu", nagu me eespool tegime.

   Kõik oma sisu siin

4. Stiil, et sisu div oleks taustapildiks sama laius ja kõrgus.

   div # sisu {
   laius: 20em;
   kõrgus: 30em;
   }

5. Seejärel asetage sisu kujutisega sama kõrgusele. Nii et kui teie pilt on 30em, oleks teil tippude stiil: -30em; Ärge unustage sisestada z-indeksit 1.

   #sisu {
   asukoht: suhteline;
   top: -30em;
   z-indeks: 1;
   laius: 20em;
   kõrgus: 30em;
   }

6. Siis lisage IE 6 kasutajatele z-indeks-1, nagu te tegite eespool:

Jällegi, kui taustal on täis laiendatud brauseritugi, siis on see lähenemine ka väga tõenäoline, et see ei ole vajalik, ja see on kujunenud varasema ajastu tootena. Kui te ei soovinud seda lähenemist kasutada, kontrollige seda kindlasti nii paljude brauseritega kui võimalik.

Ja kui teie sisu muudab suurust, peate konteineri ja taustapildi suuruse muutma, vastasel korral on teil kummalised tulemused.