CSS pozadina. Kompletan vodič

Sa pojavom CSS3, rad dizajnera izgleda postao je mnogo jednostavniji i logičniji: na kraju krajeva, sada zaista možete fleksibilno konfigurirati bilo koji objekat, pribjegavajući JavaScriptu sve manje i manje. Recimo da trebate podesiti transparentnost pozadine - CSS odmah nudi nekoliko opcija.

Pozadina je određena skupom atributa, background-repeat, background-attachment, background-origin, background-clip, background-color), a svaki od njih se može specificirati zasebno ili kombinirati pod atributom pozadine. Analizirajmo svaki od njih detaljnije.

atribut boje pozadine

Čak i IE8 podržava ovu metodu. Nekoliko slika kao pozadina se koristi u fluidnom rasporedu. Najvažnije, ne zaboravite, kada koristite bilo koju sliku, također postavite css boja pozadinu, jer korisnici možda jednostavno neće učitati sliku.

atribut pozadinske pozicije

Ako koristite sliku za postavljanje pozadine bloka, CSS će vam omogućiti da postavite sliku bilo gdje na ekranu. Podrazumevano, slika je pozicionirana sa leve strane gornji ugao. Atribut prihvaća ili verbalne indikacije (gore, dolje, lijevo, desno) ili numeričke indikacije (procenti, pikseli i druge mjerne jedinice). U ovom slučaju morate navesti dvije vrijednosti: vodoravno i okomito:

tijelo (položaj pozadine: desno središte;) - u ovom primjeru, pozadina će se nalaziti na desnoj strani stranice, a donja i gornja udaljenost do slike su ista.

atribut veličine pozadine

Ponekad je potrebno sa koristeći CSS rastegnite pozadinu ili smanjite njenu veličinu. Da biste to učinili, koristite atribut background-size, a veličina pozadine može se postaviti iu pikselima ili procentima, iu bilo kojoj drugoj mjernoj jedinici.

Postoje neki problemi sa ovim atributom: for ispravan prikaz pozadina u ranijim verzijama pretraživača mora koristiti prefikse. svakako, trenutne verzije u potpunosti podržavaju ovaj atribut i nema potrebe za posebnim svojstvima.

background-attachment atribut

Ovaj atribut specificira ponašanje pozadinske slike prilikom pomicanja. Dakle, može uzeti 3 vrijednosti (ne uzimajući u obzir nasljeđivanje, što je zajedničko za sve atribute predstavljene u ovom članku):

• fiksno- čini sliku na pozadini nepomičnom;
• skrolujte- pozadina se pomiče zajedno sa ostalim elementima;
• lokalni- slika na pozadini se pomiče ako se sadržaj pomiče. Pozadina koja nadilazi sadržaj je fiksna.

Primjer upotrebe:

tijelo (fiksirani prilog za pozadinu).

Firefox trenutno ne podržava posljednje svojstvo (lokalno).

background-origin atribut

Ovaj atribut je odgovoran za pozicioniranje elementa. Pregledači rane verzije zahtijevaju upotrebu prefiksa. Sama imovina ima tri parametra:

• padding box pozicionira pozadinu u odnosu na ivicu, uzimajući u obzir debljinu okvira;
• granična kutija razlikuje se od prethodnog svojstva po tome što granična linija može u potpunosti ili djelomično preklapati pozadinu;
• kutija sa sadržajem pozicionira sliku i vezuje je za sadržaj.

Ako je dato više vrijednosti, pretraživači mogu drugačije reagirati: Firefox i Opera prihvaćaju samo prvu opciju.

background-repeat atribut

Općenito, ako je pozadina postavljena na sliku, treba je ponoviti vodoravno ili okomito. Tome služi atribut background-repeat. Na primjer, pozadina bloka čiji CSS sadrži takvo svojstvo može imati jednu od nekoliko opcija:

• bez ponavljanja- slika se pojavljuje na stranici u jednoj verziji;
• ponovi- pozadina se ponavlja duž x i y osa;
• ponoviti x- samo horizontalno;
• repeat-y- samo vertikalno;
• prostor- pozadina se ponavlja, ali ako se prostor ne može popuniti, pojavljuju se praznine između slika;
• round- slika je skalirana ako nije moguće popuniti cijelo područje cijelim slikama.

Primjer korištenja atributa:

tijelo (ponavljanje u pozadini: ponavljanje bez ponavljanja)- slično background-repeat: repeat-y.

U CSS3, moguće je postaviti vrijednosti za više slika navođenjem opcija odvojenih zarezima.

background-clip atribut

Ovaj atribut definira ponašanje pozadine ispod granica (na primjer, u slučaju isprekidanih granica):

• padding box- pozadina se prikazuje striktno unutar bloka;
• granična kutija- slika ide ispod okvira;
• kutija sa sadržajem— slika na pozadini se pojavljuje samo unutar sadržaja.

Primjer upotrebe:

tijelo (background-clip: content-box;).

Chrom i Safari zahtijevaju upotrebu prefiksa -webkit-.

atributi neprozirnosti i filtera

Atribut neprozirnosti vam omogućava da postavite transparentnost pozadine - CSS svojstvo će raditi u svim pretraživačima. Vrijednost je postavljena između 0,0 i 1,0 uključujući. Ovim možete podesiti transparentnost css pozadina bez cjelobrojne vrijednosti: umjesto 0,3 dovoljno je napisati .3:

.block (pozadinska slika: url(img.png); neprozirnost: .3;).

Da biste postavili transparentnost pozadine, čiji je CSS pogodan čak i za IE ispod devete verzije, koristite atribut filtera:

.block (pozadinska slika: url(img.png); filter: alfa(opacity=30);).

U ovom slučaju, vrijednost neprozirnosti je postavljena između 0 i 100. Imajte na umu da se atribut neprozirnosti razlikuje od postavke transparentnosti sa koristeći RGBA nasljednost: kada se koristi neprozirnost transparentan postaje ne samo pozadina, već i svi elementi unutar bloka.

Uvijek držite na oku statistiku korištenja pretraživača za CIS i sve druge zemlje. Najviše veliki problem od svih dizajnera izgleda su stare verzije IE, oni su ti koji vam ne dozvoljavaju da koristite CSS3 u potpunosti. Prilikom rasporeda, ne zaboravite koristiti posebne usluge, koji provjerava podržava li vaš pretraživač bilo koji css svojstvo. Ako ne možete instalirati starije verzije pretraživača, pronađite servis koji će provjeriti web lokaciju različitim pretraživačima online.

Određuje sliku koja će se koristiti kao pozadinska slikaćelije tabele. Za razliku od običnih slika, pozadina nije postavljena na širinu ili visinu i uvijek se prikazuje u punoj veličini na 100% skali. Ako je slika manja od širine ili visine ćelije, onda se slika ponavlja vodoravno udesno i dolje, nižući se kao mozaik. Iz tog razloga, na raskrsnici pozadinske slike mogu postojati vidljive razlike koje su uočljive posetiocima sajta. Prilikom odabira pozadinske slike, uvjerite se da postoji dovoljan kontrast između nje i sadržaja ćelije. Također je dozvoljeno koristiti animirane slike kao pozadinu GIF format ali odvlače čitaoce.

Sintaksa

...

Vrijednosti

Bilo koja važeća adresa slike - Možete koristiti relativnu ili apsolutnu putanju.

Zadana vrijednost

Primjer

Bilješka

Za postavljanje pozadinska slika za ćeliju, koristite svojstvo stila pozadine, dodajući ga u td ili th selektor.

Pregledači

Sljedeća notacija se koristi u tabeli pretraživača.

• - element je u potpunosti podržan od strane pretraživača;
• - element ne percipira pretraživač i zanemaruje se;
• - može se pojaviti tokom rada razne greške, ili je element podržan s rezervacijama.

Broj označava verziju pretraživača iz koje je element podržan.

Mislim da ne postoji nijedna lokacija na kojoj se imovina ne bi koristila css pozadina . Čini se, šta može biti jednostavnije od ove imovine? Ali ne, njegove mogućnosti su mnogo šire od uobičajenog podešavanja slike ili boje kao pozadine stranice. Neki će biti poznati, a neki će mnogima biti novi. U svakom slučaju, bit će korisno dobro znati kako pozadina funkcionira.

CSS3 je donio mnogo novih stvari u svojstvo, kao što je transparentnost i postavljanje više slika kao pozadine, ali o tome ćemo govoriti u nastavku, ali prvo ćemo pokriti osnove svojstva pozadini.

boja pozadine

Prilično sam siguran da ste već nekoliko puta dodijelili boju pozadine. To se može učiniti korištenjem nekoliko vrsta zapisa: regularnog (koristi se naziv boje), heksadecimalne ili RGB zapisa. Svaki tip je ekvivalentan, koristite onaj koji vam se najviše sviđa. Trudim se da koristim najkraću verziju, a za percepciju je jednostavnija i stilska datoteka je malo manja.

P (boja pozadine: crvena;) p (boja pozadine: #f00;) p (boja pozadine: #ff0000;) p (boja pozadine: rgb(255, 0, 0;))

CSS3 uvodi podršku za transparentnost, tako da je možemo dodati našoj boji, ovako:

P (boja pozadine: rgba(255, 0, 0, 0,5);)

Posljednja cifra postavlja prozirnost na 50%. Možete postaviti vrijednost transparentnosti od 0 (potpuno prozirna pozadina) do 1 (potpuno neprozirna).

pozadinska slika

Ovo svojstvo se također vrlo često koristi, omogućava vam da dodijelite sliku pozadini. CSS3 dodaje mogućnost dodjeljivanja više slika pozadini, pri čemu svaka stvara neku vrstu sloja, tako da se svaka naredna preklapa s prethodnom. Zašto bi ovo moglo biti korisno? Sve je prilično jednostavno - recimo da trebate zašrafiti male stvari u svaki od uglova stranice. Osigurano manje-više gumeni raspored korištenje jedne slike nije opcija. Dakle, napravimo 4 "sloja", pomerimo svaku sliku u svoj ugao i to je to, problem je rešen

Tijelo (slika u pozadini: url("image1"), url("image2"), url("image3"))

Ako trebate jednu sliku dodijeliti pozadini, ostavljamo samo prvu u kodu, mislim da je to razumljivo.
Kada koristite bilo koju sliku kao pozadinu, morate zapamtiti dva pravila:

• pitaj kontrastne boje pozadinu u slučaju da korisnik iz nekog razloga ne vidi sliku. Može jednostavno onemogućiti prikaz slika, štedi promet.
• nemojte koristiti pozadinsku sliku da biste je prenijeli važna informacija. Iz gore navedenog razloga, korisnik ga možda neće vidjeti.

Podrška za više pozadinskih slika je prilično opsežna. Svi pretraživači, čak i IE8, podržavaju ovo svojstvo.