Kako raztegniti sliko ozadja, da prilagodite spletno stran

Dajte svoji spletni strani vizualni interes z grafiko v ozadju

Slike so pomemben del privlačnih oblik spletnih strani. To vključuje uporabo slik v ozadju. To so slike in grafike, ki se uporabljajo za območji strani, v nasprotju s slikami, ki so predstavljene kot del strani z vsebinami. Te ozadne slike lahko dodajo vizualni interes za stran in vam pomagajo doseči vizualni dizajn, ki ga morda iščete na strani.

Če začnete delati s slikami v ozadju, se boste nedvomno vključili v scenarij, v katerem želite, da se slika razteza, da ustreza strani.

To še posebej velja za odzivne spletne strani, ki so dostavljene širokemu razponu naprav in velikosti zaslona .

Ta želja po razširitvi ozadja je zelo pogosta želja za spletno oblikovalce, ker vsaka slika ne ustreza spletnemu mestu. Namesto nastavitve določene velikosti, raztezanje slike omogoča, da se prilagodi stran, ne glede na to, kako široko ali ozko okno brskalnika .

Najboljši način za raztegovanje slike, ki ustreza ozadju strani, je uporaba lastnosti CSS3 za velikost ozadja. Tukaj je primer, ki uporablja sliko za ozadje za telo strani in ki nastavi velikost na 100%, tako da se bo vedno raztegnil, da bi ustrezal zaslonu.

telo {
ozadje: url (bgimage.jpg) brez ponavljanja;
velikost ozadja: 100%;
}

Glede na caniuse.com ta lastnost deluje v IE 9+, Firefox 4+, Opera 10,5+, Safari 5+, Chrome 10,5+ in na vseh glavnih mobilnih brskalnikih. To vas pokriva za vse sodobne brskalnike, ki so na voljo danes, kar pomeni, da bi morali uporabljati to lastnost brez strahu, da ne bo delovala na nečem zaslonu.

Faking raztegnjeno ozadje v starejših brskalnikov

Zelo malo je verjetno, da boste morali podpirati vse brskalnike, starejše od IE9, vendar domnevamo, da vas skrbi, da IE8 ne podpira te znamke. V tem primeru lahko podkrepite raztegnjeno ozadje. Uporabite lahko predpone brskalnika za Firefox 3.6 (-moz-background-size) in Opera 10.0 (-o-background-size).

Najlažji način za ponarejanje raztegnjene podobe slike je, da ga raztegnete po celotni strani. Potem se ne končate z dodatnim prostorom ali pa morate skrbeti, da vaše besedilo ustreza raztegnjenim območjem. Kako to storiti:

id = "bg" />

1. Najprej se prepričajte, da imajo vsi brskalniki 100-odstotno višino, 0 robove in 0 obloge v elementih HTML BODY. Postavite naslednje v glavo vašega dokumenta HTML:

2. Dodajte sliko, ki jo želite v ozadju kot prvi element spletne strani, in ji dajte id "bg":

3. Postavite sliko ozadja tako, da je pritrjena na vrhu in levo in je 100% široka in 100% višina. Dodajte to na svoj slogovni list:

   img # bg {
   položaj: določen;
   na vrhu: 0;
   levo: 0;
   širina: 100%;
   višina: 100%;
   }

4. Vse vsebine dodajte na stran znotraj elementa DIV z ID-jem »vsebine«. Dodajte DIV pod sliko:

   Vse vaše vsebine tukaj - vključno z glave, odstavki itd.

   Opomba: zanimivo je, da si ogledate svojo stran. Slika se mora raztegniti, vendar vaša vsebina ni v celoti. Zakaj? Ker je slika v ozadju 100% višja, delitev vsebine pa je za sliko v toku dokumenta - večina brskalnikov se ne bo prikazala.
   
5. Postavite svojo vsebino, tako da je relativna in ima z-indeks 1. To bo prineslo nad sliko ozadja v brskalnike, ki so skladni s standardi. Dodajte to na svoj slogovni list:

   #content {
   položaj: relativni;
   z-indeks: 1;
   }

1. Ampak nisi končal. Internet Explorer 6 ni skladen s standardi in ima še vedno nekaj težav. Obstaja veliko načinov za skrivanje CSS iz vsakega brskalnika, vendar IE6, vendar najlažje (in najmanj verjetno, da bodo povzročile druge težave) je uporaba pogojnih komentarjev. Vstavite naslednje za svojo slogan v glavi dokumenta:

2. V ozadju označenega komentarja dodajte še nekaj slogov, da boste lahko igrali lepo:

3. Bodite prepričani, da test v IE 7 in IE 8, kot dobro. Morda boste morali prilagoditi pripombe, da jih tudi podpirate. Vendar pa je delal, ko sem ga testiral.

OK - to je gotovo WAY overkill. Zelo malo spletnih mest potrebuje več IE 7 ali 8, še manj pa IE6!

Kot tak je ta pristop zastarel in verjetno nepotreben za vas. Tukaj ga pustim bolj kot model radovednosti o tem, kako težje so bile stvari, preden so vsi naši brskalniki igrali tako lepo skupaj!

Pretvarjanje raztegnjene slike ozadja v manjši prostor

Podobno tehniko lahko uporabite za ponarejanje raztegnjene podobe v DIV ali drugem elementu na vaši spletni strani. To je nekoliko težje, saj morate uporabiti absolutno pozicioniranje ali imeti čudne razmike med drugimi deli vaše strani.

1. Postavite sliko na stran, ki jo želim uporabiti kot ozadje.

2. V slogovnem listu nastavite širino in višino slike. Opomba, lahko uporabite odstotke za širino ali višino, vendar se mi zdi lažje nastaviti z vrednostmi dolžine za višino.

   img # bg {
   širina: 20em;
   višina: 30em;
   }

3. Postavite svojo vsebino v div z id-vsebino, kot smo to storili zgoraj:

   Vse vaše vsebine tukaj

4. Vsebino vsebine nastavite tako, da je enaka širina in višina kot slika v ozadju:

   div # vsebina {
   širina: 20em;
   višina: 30em;
   }

5. Nato postavite vsebino na enako višino kot slika. Torej, če je vaša slika 30em, bi imeli slog vrha: -30em; Ne pozabite postaviti z-indeksa 1 na vsebino.

   #content {
   položaj: relativni;
   na vrhu: -30em;
   z-indeks: 1;
   širina: 20em;
   višina: 30em;
   }

6. Nato dodajte z-indeksom -1 za uporabnike IE 6, kot ste storili zgoraj:

Še enkrat, z velikostjo ozadja, ki uživa široko podporo brskalniku, ki jo sedaj opravlja, je ta pristop zelo verjetno nepotreben in predstavljen kot produkt preteklega obdobja. Če bi želeli uporabiti ta pristop, preverite, ali je to mogoče v toliko brskalnikih, kot jih lahko.

Če pa se vaša vsebina spremeni v velikost, boste morali spremeniti velikost vsebnika in slike v ozadju, sicer boste na koncu dobili čudne rezultate.