V zadnjem članku smo govorili o tem, kako spremeniti barvo ozadja na spletnem mestu z uporabo atributov oznak telo in slogi CSS: . Ta članek bo govoril o uporabi slik kot ozadja na spletnem mestu, o tem, kako raztegniti ozadje na celotno širino strani in ga popraviti.

Slika kot ozadje strani - HTML

Najprej razmislimo o metodi določanja slika ozadja na spletnem mestu z uporabo atributa ozadje oznaka telo:

Tukaj je slika ozadja nastavljena z uporabo atributa ozadja oznake body.

Kot v zgornjem primeru je priporočljivo, da poleg slike določite tudi barvo ozadja (prikazana bo na spletnem mestu med nalaganjem strani), ki se bo najbolje ujemala s sliko ozadja in ustvarila kontrast z besedilom. na strani. Na primer, če na svojem spletnem mestu uporabljate belo barvo besedila, morate določiti temno barvo ozadja in nastaviti temno sliko ozadja. V tem primeru bo besedilo lahko berljivo.

Opomba: Priporočljivo je, da sliko ozadja in barvo ozadja nastavite ne z uporabo HTML-ja, ampak z uporabo z uporabo CSS. V tem primeru bo koda veljavna in bolj pravilna.

Slika kot ozadje strani - CSS

IN CSS ozadje Novo barvo in sliko ozadja lahko nastavite v eni lastnosti ozadje:

Tukaj je slika ozadja nastavljena z lastnostjo CSS ozadja.

Tukaj uporabljamo lastnino ozadje-priponka ozadje strani je določeno in z uporabo lastnosti ozadje-ponovitev nastavljena je horizontalna ponovitev slike. Vendar je vredno upoštevati, da mora biti slika ozadja dobro "zašita" po robovih.

Če želite sliko ozadja raztegniti na polno velikost okna brskalnika, uporabite lastnost velikost ozadja: 100 %;

V graditelju spletnih strani Nubex lahko uporabite veliko sliko kot ozadje katere koli spletne strani in jo pripnete.

V tej vadnici bomo podrobno preučili tehnologijo ustvarjanja odzivne slike v ozadju, ki bo v kateri koli ločljivosti zasedla celotno vidno območje v brskalniku. In uporabili bomo CSS - lastnost velikosti ozadja. Brez JavaScripta:

PRIMER
PRENESI VIRE

Primeri uporabe odzivnih slik za ozadje

Danes so spletna mesta, na katerih slika ozadja pokriva celotno prikazano območje strani, zelo priljubljena.
Spodaj je nekaj teh spletnih mest:

Jadralni kolektiv

Digitalna telepatija

Restavracija Marianne

Če želite doseči podoben »videz« v svojem projektu, ste na pravi poti.

Osnovni pojmi

Tukaj je naš načrt igre.

Uporabite lastnost velikosti ozadja, da pokrijete celotno vidno polje

Lastnost CSS background-size lahko nastavite na cover . Vrednost pokrova naroči brskalniku, naj samodejno in sorazmerno prilagodi dolžino in širino slike ozadja, tako da ostane enaka ali večja od širine/višine vidnega polja.

Uporaba medijske poizvedbe za pridobitev manjše različice slike ozadja za mobilne naprave

Da bi zmanjšali čas nalaganja strani pri majhnih ločljivostih zaslona, ​​bomo uporabili medijsko poizvedbo za pridobitev manjše različice slike ozadja. Vendar to ni potrebno in se lahko izpusti. Ta tehnologija odlično deluje brez tega.

A kljub temu uporaba manjših različic ozadja za mobilne naprave ni slaba ideja in pojasnil bom, zakaj.
Slika, ki bo uporabljena v primeru, je velika približno 5500 x 3600 slikovnih pik.

S to ločljivostjo imamo prednost, da dosežemo pokritost celotnega vidnega polja na večini trenutno proizvedenih monitorjev širokega formata, slabost pa je velikost slike. To je približno 1,7 MB.

Pustiti toliko prostora za nalaganje samo slike ozadja v nobenem primeru ni dobra ideja, v primeru mobilnih naprav pa je zelo slaba ideja. Poleg tega je takšna ločljivost preprosto nepotrebna na zaslonih z nizko ločljivostjo ( Več o tem vam bom povedal kasneje).

torej. Začnimo.

HTML

Spodaj je vse, kar potrebujete od oznake:

... Vsebina vaše strani ...

Elementu telesa bomo dodelili sliko ozadja in tako dosegli popolno pokritost ozadja.

Vendar bo ta tehnika delovala na katerem koli elementu bloka (kot je div ali obrazec). Če je širina-višina vašega blokovnega vsebnika premična, bo tudi slika ozadja spremenila velikost, da bo zapolnila celotno območje vsebnika.

CSS

Lastnosti elementa telesa razglasimo na naslednji način:

body ( /* Lokacija slike ozadja */ background-image: url(images/background-photo.jpg); /* Slika ozadja je centrirana vodoravno in navpično */ background-position: center center; /* Ozadje se ne ponavlja */ background-repeat: no-repeat; /* Ozadje je fiksno v vidnem polju in se zato ne premakne, ko višina vsebine preseže višino slike */ background-attachment: fixed; /* Ta lastnost povzroča ozadje za spremembo merila, ko se spremeni velikost vsebnika */ background-size: cover; /* Barva ozadja, ki bo prikazana pri nalaganju slike ozadja */ background-color: #464646; )

Najpomembnejša lastnost vrednosti na tem seznamu je:

velikost ozadja: naslovnica;

Vredno je biti pozoren na to. Tukaj se zgodi čudež. Ta par vrednost-lastnost naroči brskalniku, naj prilagodi sliko ozadja v takih razmerjih, da višina-širina ostane enaka ali večja od višine-širine samega elementa. ( V našem primeru ta element- telo.)

In tu pride do neprijetne situacije s parom nepremičnina-vrednost. V primeru, ko bo slika v ozadju imela nižjo ločljivost od dimenzij elementa telesa in se to lahko zgodi bodisi, ko je stran prikazana na zaslonih visoka ločljivost, ali ko imate na strani ogromno vsebine, bo brskalnik raztegnil sliko.

In kot veste, ko sliko raztegnemo čez njeno dejansko velikost, izgubimo kakovost slike ( z drugimi besedami, pojavi se pikselizacija):

Ko se slika zmanjša proti prvotni velikosti, se kakovost slike zmanjša.

Ne pozabite na to pri izbiri ozadja. V predstavitvenem primeru uporabljamo fotografijo velikosti 5500 x 3600 slikovnih pik veliki zasloni, zato se v tem primeru kaj podobnega verjetno ne bo zgodilo.

Da bi zagotovili, da je naše ozadje poravnano na sredino, smo izjavili naslednje:

položaj ozadja: center center;

To bo nastavilo osi skaliranja na sredino vidnega polja.

Evo, kaj bomo storili. Nastavimo lastnost ozadja-priponke na fiksno, da zagotovimo, da slika ostane na mestu, tudi če se pomaknemo navzdol po strani:

ozadje-pritrditev: fiksno;

V demo primeru sem vključil možnost " prenesite nekaj vsebine", tako da lahko opazujete obnašanje ozadja med premikanjem po strani.

Vse kar morate storiti je, da prenesete predstavitev in malo eksperimentirate z lastnostmi pozicioniranja (priponka ozadja in položaj ozadja), da vidite, kako vplivajo na drsenje strani in ozadja.

Naslednje vrednosti lastnosti so razumljive same po sebi.

Stenografija CSS

Zgoraj sem zaradi jasnosti v celoti definiral lastnosti CSS.

In tako izgleda kratka verzija:

body (ozadje: url(background-photo.jpg) center center cover no-repeat fixed; )

Vse kar morate storiti je, da spremenite vrednost url v pot do vaše slike.

Izbirno: medijska poizvedba za pridobitev manjše različice slike ozadja

Za zaslone z nižjo ločljivostjo bomo potrebovali Photoshop, da sorazmerno zmanjša ločljivost slike na 768 x 505 slikovnih pik. Pognal sem ga tudi skozi Smush.it, da sem zmanjšal velikost datoteke. To je omogočilo zmanjšanje velikosti s 1741 na 114 kilobajtov. To je zmanjšalo velikost datoteke za 93 %.

Ne razumite me narobe, vendar je 114 kilobajtov še vedno precej veliko za uporabo pri nekaterih vrstah spletnega oblikovanja. In teh 114 kilobajtov bomo naložili le, če bo potrebno, ker če pogledamo statistiko, je treba narediti kompromise med namiznim in mobilnim dizajnom.

In tukaj je sama medijska poizvedba:

Ključni del medijske poizvedbe je lastnost max-width: 767px, kar v našem primeru pomeni, da če je vidno polje brskalnika večje od 767px, se uporabi velika slika.

Slaba stran te metode je, da če spremenite velikost okna brskalnika z, na primer, 1200 slikovnih pik na 640 slikovnih pik (ali obratno), boste med nalaganjem manjše ali večje slike videli utripajoč zaslon.

In poleg tega zaradi dejstva, da nekateri mobilne naprave lahko deluje pri višji ločljivosti - na primer iPhone 5 z zaslonom Retina z ločljivostjo 1136 x 640 slikovnih pik bo manjša slika videti grda.

Skoraj vsako priljubljeno spletno mesto ima lepo videz. Pomemben del oblikovanja spletne strani je ozadje, imenovano tudi ozadje, ki si ga lahko ustvari ali spremeni vsak izmed nas. V tem članku vam bom povedal, kako postaviti ozadje na spletno mesto.

Izdelava novega ozadja za spletne strani

Za dokončanje naloge lahko uporabite eno od 4 metod:

• 1. Ozadje z eno barvo
• 2. Ozadje s teksturo
• 3. Ozadje z gradientom
• 4. Ozadje iz velike slike

Ustvarite ozadje z eno barvo

Če želite ustvariti ali spremeniti ozadje spletnega mesta, ki je sestavljeno iz ene barve, morate iti v datoteko style.css, v katerem poiščite vrednost - body (odgovorna je za glavno telo spletnega mesta). Zdaj morate registrirati funkcijo barve ozadja, če še ni obstajala, in navesti kodo barve. V primeru, ko morate ustvariti belo ozadje za spletno stran, boste morali napisati naslednjo kodo:

barva ozadja: #83C5E9 ; (modro ozadje, kot v primeru)

Celoten seznam barv najdete na spletni strani - (STM). Če želite spremeniti barvo, preprosto spremenite vrednost za dvopičjem in uživajte v svojem trudu.

Ustvarjanje ozadja z uporabo teksture

Ta metoda je še posebej priljubljena v Zadnje čase, saj omogoča ustvarjanje čudovitega ozadja za spletno mesto. Teksture so lahko preproste, a zelo lepe, zato se pogosto uporabljajo. Če želite povezati katero koli teksturo, jo morate naložiti v slikovno mapo na gostovanju, kjer je nameščeno vaše spletno mesto. Po tem morate napisati naslednjo kodo:

barva ozadja: #537759;

slika ozadja: url(images/pattern.png);

Ta koda vsebuje znani parameter za ohranjanje barve (je zelena) in element, ki je odgovoren za povezovanje zelene teksture.

Izdelava ozadja z gradientom

Vsaka slika, ki je povezana s funkcijami css, se lahko ponovi vodoravno in navpično (vzdolž osi X in Y). Ta priložnost nam omogoča, da z lastnimi rokami ustvarimo katero koli preprosto ozadje za spletno mesto. Če želite to narediti, morate ustvariti gradient širine 1 milijona slikovnih pik (glejte spodnjo sliko), ga shraniti kot sliko in naložiti na svoje gostovanje. Po tem lahko napišete potrebno kodo, in sicer:

barva ozadja: #83C5E9;

slika ozadja: url(images/gradient.jpg);

ponovitev v ozadju: ponovi-x;

V tem sklopu je po prioritetnem vrstnem redu funkcija, odgovorna za barvo ozadja, ki jo uporabljamo za pozavarovanje. Za tem parameter, ki je odgovoren za povezovanje gradienta in končno, funkcija, ki je odgovorna za ponavljanje gradienta vzdolž osi X.

Uporaba velike slike za ozadje spletne strani

Ta metoda je druga najbolj priljubljena, saj vam omogoča uporabo različnih slik za ustvarjanje ozadja. Če želite izvesti to metodo, morate samo naložiti veliko sliko v mapo s slikami spletnega mesta in vnesti naslednjo kodo:

barva ozadja: #000000;

slika ozadja: url(slike/naslov slike.jpg);

položaj ozadja: sredina zgoraj;

ponavljanje v ozadju: brez ponavljanja;

Če je s prvima dvema parametroma vse jasno, je treba pokriti zadnja dva. Tretja funkcija vam omogoča, da popravite sliko v središču mesta, zadnji parameter pa blokira njeno ponavljanje po celotni strukturi strani.

Spreminjanje ozadja na spletnih mestih ucoz

Ti načini ustvarjanja ozadja za spletno mesto se lahko uporabljajo na različnih sistemih za upravljanje vsebin, ne pa tudi na spletnih mestih - ucoz. Če želite spremeniti ozadje spletnega mesta ucoz, morate iti na nadzorno ploščo spletnega mesta, pojdite na "Upravljanje oblikovanja", nato pa noter "Urejanje predlog".

Zdaj morate odpreti Style Sheet (CSS), poiskati vrstico "telo" in parameter "ozadje". Po tem morate kopirati povezavo, jo prilepiti v internetni brskalnik in imeli boste dostop do slike, ki je bila ozadje.

Če želite uporabiti novo ozadje, ga preprosto naložite v Upravitelj datotek. Hkrati se prepričajte, da je ime nove slike ozadja enako kot pred spremembo. Shranite svoje delo in pojdite na spletno stran, da si ogledate opravljeno delo.

Spreminjanje ozadja spletnega mesta v HTML

Če želite narediti ozadje na spletnem mestu html s sliko, preprosto vnesite vrstico v kodo:

In če želite narediti ozadje spletnega mesta z barvo, mora biti vrstica videti takole:

S tem se naša zgodba zaključuje. Zdaj veste, kako narediti ozadje za spletno stran. Veseli projekti!

Vsaka soba bo videti veliko bolje, če bo njena tla prekrita z drago perzijsko preprogo. Zakaj je torej vaše spletno mesto slabše? Morda je čas, da tla »pokrijete« z drago, elegantno ročno izdelano preprogo. Oglejmo si podrobneje, kako narediti ozadje za spletno stran:

Ozadje za spletno mesto

Zgodi se, da stari dizajn Saj sem se že naveličal. In želim nekaj novega in okusnega. A nov dizajn tako bo, če ga skuhate z lastnimi rokami.

Toda popolnoma spremeniti celotno zasnovo vira na lastno pest je nehvaležna naloga. In roke vseh niso ustrezno usposobljene za to nalogo. Zato je najlažji način za osvežitev stare predloge tako, da spremenite barvo ozadja vira ali njegovo sliko ozadja.

Ozadje spletnega mesta lahko spremenite na več načinov. Za to se uporabljajo zmogljivosti CSS ali html. Toda številne lastnosti za delo z ozadjem imajo isto ime in način uporabe v teh spletnih tehnologijah.

Osnove dela z ozadji v html

Kot ozadje lahko uporabite več elementov:

• barva;
• Slika ozadja;
• Slika teksture.

Oglejmo si uporabo vsakega od njih podrobneje.

Če želite nastaviti barvo ozadja za spletno mesto, uporabite lastnost barve ozadja atributa style. Če želite nastaviti glavno barvo spletne strani, jo morate napisati znotraj oznake . Na primer:

Ozadje spletne strani #55D52B

Poleg šestnajstiške barvne kode je podprta vrednost v obliki ključne besede ali RGB. Primeri:

Ozadje spletne strani rgb(23,113,44)

Zeleno ozadje spletne strani

Nastavite barvo ozadja z ključne besede ima številne omejitve v primerjavi z drugima dvema metodama.

HTML podpira le 16 ključnih besed za nastavitev barv. Tukaj je nekaj izmed njih: bela, rdeča, modra, črna, rumena in drugi.

Zato je za nastavitev ozadja za spletno mesto html bolje uporabiti šestnajstiško ali RGB obliko.

Poleg izbire barv so na voljo tudi druge možnosti prilagajanja. Če je lastnost barve ozadja nastavljena na transparentno, bo ozadje strani postalo prosojno. Ta vrednost je tej lastnosti privzeto dodeljena.

Zdaj pa si poglejmo zmožnosti jezika hiperteksta za nastavitev slike ozadja za spletno mesto. To lahko storite z lastnostjo slike ozadja.

Kot lahko vidite iz kode, je slika povezana prek poti url, navedene v oklepajih. Vendar niso vse slike tako velike, da bi njihova velikost zapolnila celotno površino zaslona. Poglejmo, kako bo prikazana manjša slika.

Recimo, da razvijamo spletno stran o poeziji in moramo za ozadje uporabiti sliko Pegaza. Krilati konj bo poosebljal svobodo pesnikove ustvarjalne misli!

Potrebujemo, da se slika enkrat prikaže na sredini zaslona. Toda na žalost brskalnik ne razume naših visokih želja. In prikaže manjšo sliko za ozadje spletnega mesta tolikokrat, kolikor lahko zaslon sprejme:

Morda bodo štirje nasmejani konji s krili prevelik navdih za pesnike. Zato prepovedujemo kloniranje našega Pegaza. To naredimo z lastnostjo ponavljanja v ozadju. Možne vrednosti:

• repeat-x – ponovi sliko ozadja vodoravno;
• repeat-y – navpično;
• ponovitev - na obeh oseh;
• brez ponavljanja – ponavljanje je prepovedano.

Med naštetimi možnostmi nas zanima zadnja. Preden spremenimo ozadje spletnega mesta, ga uporabimo v naši kodi:

Seveda pa bi bilo bolje, če bi naš letak stal na sredini ekrana. Lastnost background-position je namenjena ravno pozicioniranju slike ozadja na strani. Lokacijske koordinate lahko nastavite na več načinov:

• Ključna beseda ( zgoraj, spodaj, sredina, levo, desno);
• Odstotek – štetje se začne od zgornjega levega kota;
• V merskih enotah (piksli).

Uporabimo najpreprostejšo možnost centriranja:

Zgodi se, da morate med drsenjem popraviti položaj slike. Zato, preden naredite sliko kot ozadje spletnega mesta, uporabite posebno lastnost background-attachment. Vrednosti, ki jih sprejema, so:

• zvitek;


• fiksno.

Potrebujemo zadnjo vrednost. Zdaj bo naš primer kode videti takole:

Ozadje teksture spletne strani

V prvem primeru smo za ozadje uporabili veliko in lepo puščavsko pokrajino. Toda za takšno lepoto morate v celoti plačati. Teža slike, izdelane v visoka kvaliteta, lahko doseže več megabajtov.

Ta obseg na noben način ne vpliva na hitrost nalaganja strani v brskalniku s hitro internetno povezavo. Ampak kaj pa mobilni internet, ki bo trajalo dolgo časa za nalaganje več "metrov"?

Vse te težave se rešijo s pomočjo teksturiranega ozadja. Kot vzorec teksture uporablja majhno sliko. Tudi če se večkrat ponovi, se risba naloži le enkrat.

Trepačev D.P. 2012-2020

Študentom: Do 6. januarja imam počitnice, med počitnicami bom odgovoril čim več,
včasih lahko izginem za nekaj dni

Layout JavaScript PHP NodeJs Vue React Laravel WordPress AJAX Parsing Osnovna vadnica HTML Reference Referenca CSS Vadnica OOP in MVC Video vadnice Osnovna vadnica Referenčne video vadnice Osnovna vadnica Osnovna vadnica Osnovna vadnica Administratorjeva vadnica Vadnica za razvijalce Vadnica AJAX+PHP

lastnost priloge v ozadju

Lastnina ozadje-priponka določa, kako se pomikate slika ozadja element: skupaj z besedilom ali besedilo bo drselo čez sliko.

Sintaksa

Izbirnik (priponka v ozadju: fiksno | drsenje | lokalno; )

Vrednote

Privzeta vrednost: drsenje.

Primer. Vrednost drsenja

Zdaj lastnina ozadje-priponka nastavljena drsenje. Pomaknite element navpično - videli boste, da se besedilo pomika skupaj z ozadjem:

telo (priponka za ozadje: drsenje; slika za ozadje: url("bg.png"); ) #elem (širina: 400 slikovnih pik; rob: 0 samodejno; poravnava besedila: poravnava; teža pisave: krepko; velikost pisave: 20px;)

Primer. Vrednost drsenja

In zdaj lastnina ozadje-priponka nastavljena fiksno. Pomaknite element navpično in videli boste, kako besedilo drsi po ozadju:

telo (priponka za ozadje: popravljeno; slika za ozadje: url("bg.png"); ) #elem (širina: 400 slikovnih pik; rob: 0 samodejno; poravnava besedila: poravnava; teža pisave: krepko; velikost pisave: 20px;)