Pozadina

CSS atribut i HTML pozadinska pozicija kontroliraju lokaciju pozadinske slike i određuju gdje se ona nalazi u elementu. Pomoću njega odredite gdje će se gornji lijevi kut slike nalaziti u odnosu na gornji lijevi kut elementa. Prvo, u svojstvu se položaj piše na horizontalnoj koordinatnoj osi, a zatim - na okomici. Da biste to učinililakše je koristiti piksele.
Na primjer:

- položaj: 0 0 - koristi se prema zadanim postavkama i označava mjesto pozadine u gornjem lijevom kutu elementa;

- položaj: 100px 0 - pomaknite sliku udesno;

-pozicija: -100px 0 - pomiče sliku ulijevo;

- položaj: 0100px - smanjite sliku. Atribut background-position također radi s drugim vrijednostima, ključnim riječima i postocima. Mogu biti korisne ako veličina elementa nije navedena u pikselima.

Kako koristiti ključne riječi za pozicioniranje pozadine

Ključne riječi mogu se koristiti za određivanje koordinata na horizontalnoj i vertikalnoj osi, nije važno u kojem su redoslijedu snimljene. Varijacije ključnih riječi za horizontalnu os:

lijevo;

središte;

desno.

Za vertikalnu os:

vrh;

središte;

dolje.

Kod rada s drugim mjernim jedinicama, koordinate se prvo određuju na horizontalnoj osi, a zatim na okomitoj. Na primjer, položaj pozadine: dolje desno. Kamatne stope se koriste na isti način. U tom slučaju, odbrojavanje se nalazi u gornjem lijevom kutu prozora preglednika. Primjer korištenja interesa: pozicija pozadine: 100% 50%. To znači da se slika pomiče udesno i biti će u središtu desnog dijela elementa. Isti učinak možete postići ako koristite nekretninu: desno središte. Ako koristite vrijednost položaja pozadine: 100% 100%, pozadina će se pojaviti u donjem desnom kutu elementa.

Ponavljanje pozadine

Prema zadanim postavkama, kad je slika postavljena naKad se radi o kvaliteti pozadine, ona se ponavlja i horizontalno i vertikalno dok se ne popuni cijeli prozor ili element preglednika. Ali ponekad je potrebno da se slika prikazuje samo jednom ili se nalazi samo u jednom smjeru. Da biste to učinili, CSS i HTML za pozadinu zahtijevaju sljedeće atribute:

-ponoviti: ponavljati - po zadanoj se slici ponavlja sve dok se stavka ne popuni do kraja;

-ponoviti: nema ponavljanja - slika se ne ponavlja i koristi se na stranici samo jednom;

-ponoviti: ponoviti-x - ponavljanje samo na horizontalnoj osi;

-ponoviti: ponoviti-y - ponoviti samo na okomitoj osi;

​​

-repeat: inherit - preglednik koristi vrijednost dodijeljenu roditeljskom elementu.

Atribut za scrollbar

HTML background-attachment definira što se događa sa slikom kada se korisnik pomiče kroz stranicu. Ovaj atribut ima nekoliko svojstava: pomicanje, fiksiranje i nasljeđivanje. Naslijedi izvješća da pozadinski prilog nasljeđuje svojstvo roditelja. Da biste pravilno koristili privitak pozadine, morate razmisliti o tome kako će korisnik komunicirati s okvirom za prikaz. Preglednik je dio preglednika koji prikazuje web-stranicu. Prilikom pomicanja prema dolje na web-lokaciji, ona se ne pomiče. Umjesto toga, sadržaj stranice se pomiče prema gore, ali čini se da se stranica pomiče prema dolje u prozoru preglednika.

Prilikom postavljanja HTML pozadinskog privitka: scroll svojstva, pregledniku se kaže da se pozadina treba pomicati zajedno s elementom. Pozadina se "drži" elementa i pomiče se dok ne nestane. To je tozadana vrijednost za privitak pozadine. Ali kad se postavi pozadina-privitak: fiksno svojstvo, pozadina treba ostati na mjestu i ne kretati se zajedno sa sadržajem. Prilikom pomicanja prema dolje stranica uvijek ostaje vidljiva.

Kako ukratko zapisati svojstva pozadine

Umjesto da svaki put pišete sva ova pravila, možete ih kombinirati u jednu i napisati ih na sljedeći način: pozadina :. I ne morate specificirati svaku vrijednost zasebno. Ako se svojstvo ne koristi, umjesto njega će se koristiti zadana vrijednost. Važno je napomenuti da se pozadinska slika pojavljuje samo u onim područjima gdje je prisutan nadređeni element. Čak i kada se nalazi u odnosu na prozor preglednika, neće se prikazati ako njegova nadređena stavka nije vidljiva. Možete koristiti više od jedne slike za pozadinu stavki u CSS3. Kôd će biti isti kao i CSS2, samo pojedinačne adrese slika moraju biti odvojene zarezom. Prvi će se nalaziti u gornjem dijelu elementa, a sljedeći će se spojiti u njega.

Svojstvo veličine pozadine

Ponekad web-mjesto mora odrediti pozadinu određene veličine. Atribut koji se koristi za to u HTML - veličinu pozadine. Ovo svojstvo ima više mogućih vrijednosti:

-size: sadrži - skalira sliku tako da odgovara elementu, zadržavajući omjer aspekta bitmapa;

-size: cover - proširuje sliku kako bi ispunio element, zadržavajući proporcije;

veličina: 100px 100px - skalira sliku na određenu veličinu;

veličina: 50% 100% - Skalira sliku na određenu veličinu, postotak se odnosi na veličinu stavke. Veličina pozadine u HTML-u za Firefox do verzije 4.0 postavljena je na svojstvo -moz-background-size koje nije zadano. Isto tako, za verziju Opera 1053 morate propisati -o-background-size.

svojstvo pozadinskog podrijetla

Svojstvo pozadinskog podrijetla koristi se zajedno s pozicijom pozadine za pozicioniranje pozadinske slike. Primjenjuje se ako je privitak pozadine postavljen na fiksno. Njegovi se parametri mogu izvesti iz granica, udubljenja ili sadržaja stavke.

- porijeklo: granični okvir; Pozadina - položaj izračunava se od granice.

- porijeklo: punjenje-kutija; Pozadina - položaj izračunava se iz polja punjenja.

- izvor: content-box; background - Položaj se izračunava na temelju sadržaja stavke.

Mogućnosti za korištenje pozadinske slike

Osim očitih dekorativnih prednosti pozadine, može se koristiti i za druge svrhe. Na primjer, ako dodate CSS float svojstvo za offset elemente, teško je osigurati da se dva ili više stupaca pojavljuju na istoj širini. Ako se razlikuju, pozadina jednog stupca završit će prije pozadine druge. Taj se učinak može izbjeći ako za svaku kolonu koristite zasebnu pozadinu. Ali mnogo je lakše primijeniti jednu pozadinsku sliku na njihov roditeljski element. Druga moguća primjena je ukrašavanje neuređenih popisa. Bulitesi u njima možda ne izgledaju vrlo atraktivno, pa ih je bolje sakriti i zamijeniti pozadinskom slikom.

Fontovi umjesto pozadine u html: fontu pozadine

Odabir fonta zaregistracija web-mjesta na internetu je vrlo ograničena. Možete izraditi izvorne fontove, ali oni zahtijevaju da korisnik omogući podršku za JavaScript. Jednostavnije rješenje koje funkcionira u bilo kojem pregledniku i stvara sliku iz teksta i koristi je kao pozadinu elementa. Ako želite da tekst ostane u oznakama za tražilice i čitače zaslona, ​​jednostavno dodijelite klasi elementu, ostavite tekst u opisu i dodajte sliku putem CSS-a. U ovom slučaju, preglednici će prikazati natpis koristeći ne-korisnički definirane fontove, odnosno onu koju je odabrao dizajner.

Novo svojstvo pozadinskog prekida

CSS3 ima novu značajku: elementi se mogu podijeliti na pojedinačne blokove, retke i stranice. Osobina background-break definira kako se pozadina prikazuje u različitim prozorima. Moguće vrijednosti:

-razlomak: kontinuirano - zadana vrijednost. Tretira blokove kao da nema razmaka između njih;

-razlomak: granični okvir - uzima u obzir prostor između blokova;

-razlomak: svaki okvir - pojedinačno obrađuje svaki blok u elementu i ponovno crta pozadinu za svaku od njih.

Postoje mnoge druge osobine koje pomažu prilagoditi prikaz pozadine, ovdje su najčešće opisane. Znanje dolazi s iskustvom, pa je praksa najbolji način za učenje CSS-a i HTML-a.