Fundal CSS. Ghidul complet

Odată cu apariția CSS3, munca designerilor de layout a devenit mult mai ușoară și mai logică: acum puteți personaliza cu adevărat flexibil orice obiect, folosind JavaScript din ce în ce mai puțin. Să presupunem că trebuie să ajustați transparența fundalului - CSS oferă imediat mai multe opțiuni.

Fundalul este stabilit de un set de atribute, background-repeat, background-attachment, background-origin, background-clip, background-culoare), iar fiecare dintre ele poate fi scris separat sau combinat sub atributul fundal. Să aruncăm o privire mai atentă la fiecare dintre ele.

Atribut de culoare de fundal

Chiar și IE8 acceptă această metodă. Mai multe imagini sunt folosite ca fundal pentru aspectul fluid. Principalul lucru, nu uitați când utilizați orice imagine, de asemenea, setați Culoare CSS fundal, deoarece utilizatorii pot pur și simplu să nu aibă o imagine încărcată.

Atribut de poziție de fundal

Dacă utilizați o imagine pentru a seta fundalul unui bloc, CSS vă va permite să poziționați imaginea oriunde pe ecran. În mod implicit, imaginea este poziționată în stânga colțul de sus... Atributul acceptă fie indicații verbale (sus, jos, stânga, dreapta), fie indicații numerice (procente, pixeli și alte unități). În acest caz, trebuie să specificați două valori: orizontal și vertical:

body (background-position: right center;) - în acest exemplu, fundalul va fi situat în partea dreaptă a paginii, cu aceleași distanțe de jos și de sus față de imagine.

Atribut dimensiunea fundalului

Uneori cerut cu folosind CSSîntinde fundalul sau reduce dimensiunea acestuia. Pentru aceasta se folosește atributul background-size, iar dimensiunea fundalului poate fi setată atât în ​​pixeli sau procente, cât și în orice alte unități de măsură.

Există câteva probleme cu acest atribut: pentru afișare corectă fundalul în versiunile anterioare ale browserelor trebuie să utilizeze prefixe. Cu siguranță, versiunile curente sprijină pe deplin acest atribut și nevoia de proprietăți specifice a dispărut.

Atribut de atașament de fundal

Acest atribut specifică comportamentul de defilare al imaginii de fundal. Deci, poate lua 3 valori (excluzând moștenirea, care este comună tuturor atributelor prezentate în acest articol):

• fix- face imaginea de pe fundal nemișcată;
• sul- fundalul defilează împreună cu restul elementelor;
• local- imaginea din fundal defilează dacă conținutul are derulare. Sunt capturate fundaluri care depășesc conținutul.

Exemplu de utilizare:

corp (fond-ataș fix).

Firefox nu acceptă în prezent această din urmă proprietate (locală).

Atribut de origine-fond

Acest atribut este responsabil pentru poziționarea elementului. Browsere versiuni timpurii necesită utilizarea prefixelor. Proprietatea în sine are trei parametri:

• padding-box poziționează fundalul față de margine, ținând cont de grosimea cadrului;
• cutie-chenar diferă de proprietatea anterioară prin aceea că linia de frontieră se poate suprapune complet sau parțial cu fundalul;
• caseta de conținut poziționează imaginea legând-o de conținut.

Dacă sunt date mai multe valori, browserele pot reacționa diferit: Firefox și Opera acceptă doar prima opțiune.

Atribut de repetiție de fundal

De obicei, dacă un fundal este definit de o imagine, acesta ar trebui să se repete orizontal sau vertical. Pentru aceasta este atributul background-repeat. Deci, fundalul unui bloc al cărui CSS conține o astfel de proprietate poate avea unul dintre mai mulți parametri:

• fără repetare- imaginea apare pe pagină într-o singură versiune;
• repeta- fundalul se repetă de-a lungul axelor x și y;
• repeta-x- numai pe orizontală;
• repeta-y- numai pe verticală;
• spaţiu- fundalul se repetă, dar dacă spațiul nu poate fi umplut, atunci apar goluri între poze;
• rundă- imaginea este scalată dacă este imposibil să umpleți întreaga zonă cu imagini întregi.

Un exemplu de utilizare a atributului:

body (background-repeat: repetiție fără repetare)- la fel background-repeat: repetare-y.

În CSS3, este posibil să setați valori pentru mai multe imagini prin enumerarea parametrilor separați prin virgule.

Atribut de clip de fundal

Acest atribut definește comportamentul fundalului sub margini (de exemplu, în cazul marginilor întrerupte):

• padding-box- fundalul este afisat strict in interiorul blocului;
• cutie-chenar- imaginea trece sub rame;
• caseta de conținut- imaginea din fundal apare doar în interiorul conținutului.

Exemplu de utilizare:

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

Chrom și Safari necesită prefixul -webkit-.

Opacitate și atribute de filtrare

Atributul de opacitate vă permite să setați transparența fundalului - proprietatea CSS va funcționa în toate browserele. Valoarea este setată în intervalul de la 0,0 la 1,0 inclusiv. Cu aceasta, puteți seta transparența Fundal CSS fără valoare întreagă: în loc de 0,3 este suficient să scrieți 3:

.block (imagine de fundal: url (img.png); opacitate: .3;).

Pentru a seta transparența fundalului, al cărui CSS va funcționa chiar și pentru IE sub cea de-a noua versiune, utilizați atributul de filtru:

.block (imagine de fundal: url (img.png); filtru: alfa (opacitate = 30);).

În acest caz, opacitatea este setată între 0 și 100. Rețineți că atributul de opacitate este diferit de setarea opacității cu folosind RGBA ereditate: atunci când este folosit opacitate transparentă devine nu doar fundalul, ci și toate elementele din interiorul blocului.

Urmăriți întotdeauna statisticile de utilizare a browserelor în CSI și în toate celelalte țări. Cel mai o problema mare Toți designerii de layout sunt versiuni vechi de IE, nu permit utilizarea completă a CSS3. Când te machiezi, nu uita să folosești servicii speciale care verifică dacă browserul tău acceptă vreunul proprietate CSS... Dacă nu puteți instala versiuni vechi de browsere, găsiți un serviciu care va verifica site-ul browsere diferite pe net.

Specifică imaginea pentru a fi folosită imagine de fundal celule de tabel. Spre deosebire de imaginile obișnuite, fundalul nu este setat la lățime și înălțime și este întotdeauna afișat la dimensiune completă și scalat la 100%. Dacă imaginea este mai mică decât lățimea sau înălțimea celulei în dimensiune, atunci imaginea se repetă orizontal la dreapta și în jos, aliniându-se ca un mozaic. Din acest motiv, la intersecție imagini de fundal pot exista picături vizibile care sunt vizibile pentru vizitatorii site-ului. Când alegeți o imagine de fundal, asigurați-vă că există suficient contrast între aceasta și conținutul celulei. De asemenea, este permisă utilizarea imaginilor animate ca fundal. format GIF dar distrage atenția cititorilor.

Sintaxă

...

Valorile

Orice adresă de imagine validă - puteți utiliza o cale relativă sau absolută.

Valoare implicită

Exemplu

Notă

A întreba imagine de fundal pentru celulă, utilizați proprietatea stilului de fundal adăugându-l la selectorul td sau th.

Browsere

Următoarele convenții sunt utilizate în tabelul browserului.

• - elementul este pe deplin suportat de browser;
• - elementul nu este perceput de browser și este ignorat;
• - in timpul functionarii, aparitia diverse erori, sau articolul este susținut de avertismente.

Numărul indică versiunea de browser din care este acceptat elementul.

Cred că nu există un singur site unde proprietatea să nu fie folosită Fundal CSS ... S-ar părea că ce poate fi mai simplu decât această proprietate? Dar nu, capabilitățile sale sunt mult mai largi decât scopul obișnuit al unei imagini sau al unei culori ca fundal al paginii. Ceva va fi familiar, dar ceva va deveni cu siguranță o noutate pentru mulți. În orice caz, va fi util să știți în detaliu cum funcționează fundalul.

CSS3 a adus o mulțime de lucruri noi proprietății, aceasta este transparența și alocarea mai multor imagini ca fundal, dar vom vorbi despre asta mai jos și, mai întâi, ne vom uita la elementele de bază ale proprietății. fundal.

culoare de fundal

Sunt destul de sigur că ați făcut alocarea culorilor de fundal de mai multe ori. Acest lucru se poate face folosind mai multe tipuri de notație: regulată (se folosește numele culorii), notație hexazecimală sau RGB. Fiecare tip este egal, folosește ceea ce îți place mai mult. Încerc să folosesc cea mai scurtă versiune, iar de dragul percepției este mai simplu, iar fișierul de stil este puțin mai mic ca dimensiune.

P (culoarea fundalului: roșu;) p (culoarea fundalului: # f00;) p (culoarea fundalului: # ff0000;) p (culoarea fundalului: rgb (255, 0, 0;))

Există suport pentru transparență în CSS3, așa că îl puteți adăuga la culoarea noastră, de exemplu:

P (culoare de fundal: rgba (255, 0, 0, 0,5);)

Ultima cifră a fost setată la 50% transparență. Puteți seta valoarea transparenței de la 0 (fond complet transparent) la 1 (complet opac).

imagine de fundal

Această proprietate este, de asemenea, folosită foarte des, vă permite să atribuiți o imagine fundalului. CSS3 adaugă posibilitatea de a atribui mai multe imagini fundalului, fiecare creând un fel de strat, astfel încât fiecare ulterioară este suprapusă pe cea anterioară. De ce ar putea fi util acest lucru? Totul este destul de simplu - să presupunem că trebuie să fixați lucrurile mici în fiecare colț al site-ului. Prevăzut mai mult sau mai puțin dispunerea cauciucului utilizarea unei singure imagini nu este o opțiune. Prin urmare, facem 4 "straturi", mutam fiecare imagine in coltul ei si gata, problema este rezolvata

Corp (imagine de fundal: url ("imagine1"), url ("imagine2"), url ("image3"))

Dacă trebuie să atribuiți o singură imagine fundalului, o lăsăm doar prima în cod, cred că este de înțeles.
Când utilizați orice imagine ca fundal, trebuie să aveți în vedere două reguli:

• cere culoare contrastantă fundal în cazul în care utilizatorul nu afișează o imagine dintr-un motiv oarecare. Poate opri afișarea imaginilor banale, economisește trafic.
• nu utilizați o imagine de fundal pentru a transmite niciuna Informații importante... Din motivul menționat mai sus, este posibil ca utilizatorul să nu îl vadă.

Suportul pentru mai multe imagini de fundal este suficient de larg. Toate browserele, chiar și IE8, acceptă această proprietate.