Skoraj vsako priljubljeno spletno mesto ima lep videz. Pri oblikovanju spletnih strani je pomemben del ozadje, ki mu pravimo tudi ozadje, ki ga lahko ustvari ali spremeni vsak izmed nas. V tem članku vam bom povedal, kako postaviti ozadje na spletno mesto.

Izdelava novega ozadja za spletna mesta

Za dokončanje naloge lahko uporabite enega od 4 načinov:

• 1. Ozadje z eno barvo
• 2. Ozadje s teksturo
• 3. Ozadje z gradientom
• 4. Ozadje z veliko sliko

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 najti vrednost - telo (odgovorno je za glavno telo spletnega mesta). Zdaj morate napisati funkcijo barve ozadja, če je ni bilo, in določiti barvno kodo. V primeru, ko morate ustvariti belo ozadje za spletno mesto, 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, samo spremenite vrednost za dvopičjem in uživajte v svojem delu.

Ustvarjanje ozadja s teksturo

Ta metoda je v zadnjem času še posebej priljubljena, saj vam omogoča, da naredite čudovito ozadje 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 mapo s slikami 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);

V tej kodi je znan 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 tako vodoravno kot navpično (vzdolž osi X in Y). Ta funkcija nam omogoča, da z lastnimi rokami ustvarimo katero koli preprosto ozadje za spletno mesto. Če želite to narediti, morate ustvariti 1 milijon slikovnih pik širok gradient (glejte spodnjo sliko), ga shraniti kot sliko in naložiti na gostovanje. Po tem lahko napišete potrebno kodo, in sicer:

barva ozadja: #83C5E9;

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

ponovitev ozadja: ponovitev-x;

V tem nizu je po prednostnem vrstnem redu funkcija, ki je odgovorna za barvo ozadja, ki jo uporabljamo za pozavarovanje. Po tem parameter, ki je odgovoren za povezavo gradienta, in končno funkcija, ki je odgovorna za ponavljanje gradienta vzdolž osi X.

Uporaba velike slike za ozadje spletnega mesta

Ta metoda je druga najbolj priljubljena, saj omogoča uporabo različnih slik za ustvarjanje ozadja. Za izvedbo te metode morate samo naložiti veliko sliko v mapo s slikami spletnega mesta in napisati naslednjo kodo:

barva ozadja: #000000;

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

položaj ozadja: sredinski vrh;

ponovitev v ozadju: brez ponovitve;

Če je s prvima dvema parametrom vse jasno, je treba zadnja dva poudariti. Tretja funkcija vam omogoča, da sliko pritrdite na sredino spletnega mesta, zadnji parameter pa blokira njeno ponavljanje po strukturi strani.

Spreminjanje ozadja na spletnih mestih ucoz

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

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

Če želite uporabiti novo ozadje, ga morate samo naložiti v upravitelja datotek. Hkrati se prepričajte, da je ime nove slike za ozadje enako kot pred spremembo. Shranite svoje delo in pojdite na spletno mesto, da si ogledate opravljeno delo.

Spremenite ozadje spletnega mesta v HTML

Če želite narediti ozadje na spletnem mestu html s pomočjo slike, preprosto vnesite vrstico v kodo:

In če želite ozadje spletnega mesta narediti z barvo, mora črta izgledati takole:

S tem je naša zgodba zaključena. Zdaj veste, kako narediti ozadje za spletno mesto. Uspešni projekti!

Trepačev D.P. 2012-2020

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

JavaScript kodiranje PHP NodeJs Vue React Laravel WordPress AJAX Parsing Core Vadnica HTML Reference CSS Vadnica OOP & MVC Vadnica Video Vadnice Master Tutorial Reference Video Vadnice Core Vadnica Core Vadnica Admin Vadnica Vadnica za razvijalce AJAX+PHP Vadnica

lastnost priloge ozadja

Lastnina ozadje-priponka nastavi, kako se pomika po sliki ozadja elementa: skupaj z besedilom ali besedilo bo drselo po sliki.

Sintaksa

Izbirnik (priloga v ozadju: fiksna | pomik | lokalno;)

Vrednote

Privzeta vrednost: pomikajte.

Primer. Pomen zvitka

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

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

Primer. Pomen zvitka

In zdaj lastnina ozadje-priponka nastavljena fiksno. Pomaknite se po elementu navpično - videli boste, da besedilo drsi po ozadju:

telo ( priloga ozadja: fiksna; slika ozadja: url("bg.png"); ) #elem ( širina: 400px; rob: 0 samodejno; poravnava besedila: poravnava; teža pisave: krepko; velikost pisave: 20px;)

Privzeto, ko se pomikate po spletni strani z ozadjem, se ozadje pomika skupaj z drugimi elementi. Včasih je to primerno, včasih pa želite, da slika, nastavljena prek slike ozadja, vedno ostane vidna. Za nadzor tega stanja obstaja lastnost priloge v ozadju.

vrednosti priloge v ozadju

Lastnost lahko sprejme tri vrednosti za prilagoditev obnašanja ozadja:

• pomikanje (privzeto) – slika ozadja se premika z drugimi elementi, ko se pomika po spletni strani.
• fiksno - vrednost popravi sliko ozadja, zaradi česar je neobčutljiva za pomikanje. Ko se pomikate po strani, bo ozadje v ozadju ostalo nepremično.
• lokalno - ta vrednost je bila dodana zaradi dejstva, da je v primeru lokalnega drsnika ozadje z vrednostjo pomikajte Obnašajte se kot fiksno. Z vrednostjo lokalni ozadje se pomika z vsebino elementa in se ne pomika, če se vsebina ne pomika (vendar se pomika s samim elementom).

Za boljše razumevanje delovanja lastnine si oglejte spodnje primere. Za primerjavo so vaše vrednosti prilog v ozadju vse tri (upajmo, da pri učenju CSS uporabljate sodoben namizni brskalnik!).

priloga v ozadju: pomik

priloga v ozadju: fiksna

priloga v ozadju: lokalna

Podpora za brskalnik

Popolna podpora za vse vrednosti lastnosti priloge v ozadju je na voljo za namizne brskalnike IE9+, Edge 12+, Firefox 25+, Chrome (vse različice), Safari 5+, Opera 11.5+. V mobilnih brskalnikih, Opera Mobile, Firefoxu za Android, IE Mobile in brskalniku QQ razumejo vse vrednosti. V drugih brskalnikih je podpora delna ali pa sploh ni.

Nadalje v vadnici: lastnosti background-origin in background-clip za pozicioniranje slik ozadja in nadzor izrezovanja.

Ta kratka lekcija bo govorila o tem, kako narediti čudovito fiksno ozadje na vašem spletnem mestu (ali na enem stranniku), ki bo gladko prehajalo z ene slike na drugo, ko se uporabnik pomika po strani. CSS ima lastnost background-attachment: fixed, ki vam omogoča, da popravite sliko ozadja. To pomeni, da se pri pomikanju po strani ne bo pomikalo s stranjo. Toda v CSS ni lastnosti, ki bi nam omogočila spreminjanje slik ob pomikanju, zato bomo uporabili Javascript.

Popravljeno ozadje za spletno mesto

Morda ne razumete, o čem pišem, zato si oglejte demo in sami boste videli ta čudovit učinek:

Prenesi

Kako spremeniti ozadje spletnega mesta?

HTML

Začeli bomo z definiranjem strukture HTML strani, za katero izvajamo ta učinek:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div id="cbp-fbscroller" class="cbp-fbscroller">

V oznaki