CSS pozadina. Kompletan vodič

S pojavom CSS3, rad dizajnera izgleda je na mnoge načine postao jednostavniji i logičniji: nakon svega, sada možete uistinu fleksibilno konfigurirati bilo koji objekt, sve rjeđe pribjegavajući JavaScriptu. Recimo da trebate prilagoditi prozirnost pozadine - CSS odmah nudi nekoliko opcija.

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

atribut boje pozadine

Čak i IE8 podržava ovu metodu. Nekoliko slika koristi se kao pozadina za fleksibilan raspored. Glavna stvar je da kada koristite bilo koju sliku, ne zaboravite također navesti CSS boja pozadini, jer korisnici možda jednostavno neće učitati sliku.

atribut položaja pozadine

Ako koristite sliku za postavljanje pozadine bloka, CSS će vam omogućiti da postavite sliku bilo gdje na zaslonu. Prema zadanim postavkama, slika se nalazi na lijevoj strani gornji kut. Atribut prihvaća ili verbalne oznake (gore, dolje, lijevo, desno) ili numeričke (postoci, pikseli i druge mjerne jedinice). U ovom slučaju morate navesti dvije vrijednosti: vodoravno i okomito:

body (background-position: right center;) - u ovom primjeru pozadina će se nalaziti na desnoj strani stranice, a udaljenosti od dna i vrha do slike su iste.

atribut veličine pozadine

Ponekad je potrebno sa koristeći CSS rastegnuti pozadinu ili smanjiti njezinu veličinu. Da biste to učinili, upotrijebite atribut veličine pozadine, a veličina pozadine može se postaviti u pikselima ili postocima ili u bilo kojoj drugoj mjernoj jedinici.

Postoje neki problemi s ovim atributom: za ispravan prikaz pozadini u ranijim verzijama preglednika potrebno je koristiti prefikse. Sigurno, trenutne verzije u potpunosti podržavaju ovaj atribut i potreba za određenim svojstvima je nestala.

background-attachment atribut

Ovaj atribut određuje ponašanje pozadinske slike prilikom pomicanja. Dakle, može uzeti 3 vrijednosti (ne uzimajući u obzir nasljeđivanje, što je zajedničko svim atributima predstavljenim u ovom članku):

• fiksni— čini sliku na pozadini nepomičnom;
• svitak— pozadina se pomiče zajedno s drugim elementima;
• lokalni— pozadinska slika se pomiče ako sadržaj ima pomicanje. Pozadina koja se proteže izvan sadržaja je fiksna.

Primjer upotrebe:

tijelo (pozadina-prilog fiksan).

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

atribut podrijetla pozadine

Ovaj atribut je odgovoran za pozicioniranje elementa. Preglednici ranije verzije zahtijevaju upotrebu prefiksa. Sama nekretnina ima tri parametra:

• padding-box postavlja pozadinu u odnosu na rub, uzimajući u obzir debljinu okvira;
• rubni okvir razlikuje se od prethodnog svojstva po tome što granična linija može potpuno ili djelomično preklapati pozadinu;
• kutija sa sadržajem pozicionira sliku povezujući je sa sadržajem.

Ako je navedeno više vrijednosti, preglednici mogu reagirati drugačije: Firefox i Opera prihvaćaju samo prvu opciju.

atribut ponavljanja pozadine

U pravilu, ako je pozadina dana slikom, treba je ponoviti vodoravno ili okomito. Za to se koristi atribut ponavljanja u pozadini. Dakle, pozadina bloka čiji CSS sadrži takvo svojstvo može imati jedan od nekoliko parametara:

• nema-ponoviti— slika se pojavljuje na stranici u jednoj verziji;
• ponoviti— pozadina se ponavlja duž x i y osi;
• ponovi-x- samo vodoravno;
• ponoviti- samo okomito;
• prostor— pozadina se ponavlja, ali ako se prostor ne može popuniti, tada se između slika pojavljuju praznine;
• krug— slika se skalira ako nije moguće ispuniti cijelo područje cijelim slikama.

Primjer upotrebe atributa:

tijelo (pozadinsko ponavljanje: ponavljanje bez ponavljanja)- sličan pozadinsko ponavljanje: ponavljanje-y.

U CSS3 je moguće postaviti vrijednosti za više slika ako navedete parametre odvojene zarezima.

atribut pozadinskog isječka

Ovaj atribut definira ponašanje pozadine ispod obruba (na primjer, u slučaju točkastih obruba):

• padding-box— pozadina se prikazuje strogo unutar bloka;
• rubni okvir- slika odgovara okviru;
• kutija sa sadržajem— slika u pozadini pojavljuje se samo unutar sadržaja.

Primjer upotrebe:

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

Chrom i Safari zahtijevaju prefiks -webkit-.

Atributi neprozirnosti i filtra

Atribut neprozirnosti omogućuje postavljanje prozirnosti pozadine - svojstvo CSS radit će u svim preglednicima. Vrijednost se može postaviti od 0,0 do uključivo 1,0. Ovime možete postaviti prozirnost CSS pozadina bez cjelobrojne vrijednosti: umjesto 0.3 dovoljno je napisati.3:

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

Za postavljanje prozirnosti pozadine, čiji će CSS raditi čak i za IE ispod verzije 9, koristite atribut filtera:

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

U ovom slučaju vrijednost neprozirnosti postavljena je između 0 i 100. Imajte na umu da se atribut neprozirnosti razlikuje od postavke prozirnosti s koristeći RGBA nasljedstvo: kada se koristi neprozirnost transparentan ne samo pozadinu, već i sve elemente unutar bloka.

Uvijek pratite statistiku korištenja preglednika za CIS i sve druge zemlje. Najviše veliki problem svi dizajneri izgleda imaju stare verzije IE-a, koje ne dopuštaju punu upotrebu CSS3. Prilikom kodiranja ne zaboravite koristiti posebne usluge, koji provjeravaju podržava li vaš preglednik CSS svojstvo. Ako ne možete instalirati starije verzije preglednika, pronađite servis koji će provjeriti rad stranice različitim preglednicima na liniji.

Određuje sliku koja će se koristiti kao pozadinska slikaćelije tablice. Za razliku od uobičajenih slika, pozadina nema postavljenu širinu ili visinu i uvijek se prikazuje u punoj veličini na 100%. Ako je slika manja od širine ili visine ćelije, tada se slika ponavlja vodoravno udesno i dolje, redajući se poput mozaika. Iz tog razloga, na spoju pozadinske slike Mogu se pojaviti vidljive razlike koje su uočljive posjetiteljima stranice. Prilikom odabira pozadinske slike provjerite postoji li dovoljan kontrast između nje i sadržaja ćelije. Također je moguće koristiti animirane slike kao pozadinu. GIF format, ali odvlače pozornost čitatelja.

Sintaksa

...

Vrijednosti

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

Zadana vrijednost

Primjer

Bilješka

Postaviti pozadinska slika Za ćeliju upotrijebite svojstvo stila pozadine tako da ga dodate selektoru td ili th.

Preglednici

U tablici preglednika koriste se sljedeće oznake.

• - element u potpunosti podržava preglednik;
• - preglednik ne percipira element i zanemaruje ga;
• - može se pojaviti tijekom rada razne greške, ili je artikl podržan s rezervacijom.

Broj označava verziju preglednika iz kojeg je element podržan.

Mislim da nema nijedne lokacije na kojoj se nekretnina ne koristi CSS pozadina . Čini se da što može biti jednostavnije od ove nekretnine? Ali ne, njegove su mogućnosti puno šire od uobičajenog dodjeljivanja slike ili boje kao pozadine stranice. Neke će stvari biti poznate, dok će druge mnogima vjerojatno biti nove. U svakom slučaju, bit će korisno znati temeljito kako pozadina radi.

CSS3 je donio puno novih stvari u svojstvo, kao što je transparentnost i dodjeljivanje nekoliko slika kao pozadine, ali o tome ćemo govoriti u nastavku, ali prvo ćemo pogledati osnove svojstva pozadina.

boja pozadine

Više sam nego siguran da ste već više puta dodijelili boju pozadine. To se može učiniti korištenjem nekoliko vrsta zapisa: obični (koristi se naziv boje), heksadecimalni ili RGB zapis. Svaka vrsta je ekvivalentna, koristite onu koja vam se najviše sviđa. Pokušavam koristiti najkraću opciju, a radi lakše percepcije, rezultirajuća 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 podržava prozirnost, pa je možemo dodati našoj boji, na primjer ovako:

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

Zadnja brojka postavlja prozirnost na 50%. Možete postaviti vrijednost prozirnosti od 0 (potpuno prozirna pozadina) do 1 (potpuno neprozirna).

pozadinska slika

Ovo se svojstvo također koristi vrlo često; omogućuje vam dodijeljivanje slike pozadini. CSS3 je dodao mogućnost dodjele više slika pozadini, od kojih svaka stvara svoj sloj, tako da se svaka sljedeća preklapa s prethodnom. Zašto bi ovo moglo biti korisno? Sve je vrlo jednostavno - recimo da trebate uvrnuti male ukrase u svaki kut stranice. Pod uvjetom da više-manje gumeni raspored korištenje jedne slike nije opcija. Dakle, napravimo 4 "layera", svaku sliku premjestimo u svoj kut i to je sve, problem je riješen

Tijelo (pozadinska slika: url("slika1"), url("slika2"), url("slika3"))

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

• postaviti kontrastna boja pozadinu u slučaju da korisnik iz nekog razloga ne vidi sliku. Može jednostavno isključiti prikaz slika, štedeći promet.
• nemojte koristiti pozadinsku sliku za prenošenje bilo čega važna informacija. Iz gore navedenih razloga, korisnik ga možda neće vidjeti.

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