După cum ați observat din tutorialele anterioare, există o modalitate de a stila fundalul în CSS: un numar mare de proprietăți. Și dacă trebuie să specificați mai multe dintre ele simultan, vă recomandăm să utilizați proprietatea de fundal - aceasta este o notație scurtă care acceptă multe valori și vă eliberează de a fi nevoie să scrieți fiecare proprietate pentru fundal separat (care, apropo, este destul de lung și incomod).

Ordinea în care sunt scrise valorile de fundal

Proprietatea de fundal combină toate proprietățile pentru fundal. Puteți enumera valorile din acesta pentru:

• imagine de fundal
• fundal-poziție
• dimensiunea fundalului (CSS3)
• fundal-repetare
• atașament de fundal
• origine-fond (CSS3)
• clip de fundal (CSS3)
• culoare de fundal

Ordinea în care sunt scrise valorile poate fi arbitrară - browserul însuși va determina corespondența dintre proprietăți și valori. Dar pentru o explicație schematică, folosim secvența din specificația CSS:

După cum puteți vedea în figură, scriem valorile tuturor proprietăților separate printr-un spațiu ca de obicei. Excepția sunt proprietățile fundal-position și background-size - acestea trebuie separate printr-o bară oblică / .

Niciuna dintre valori nu este obligatorie; puteți omite valori pentru proprietățile pe care doriți să le lăsați implicite. Apropo, setările implicite de fundal sunt după cum urmează:

Imagine de fundal: niciuna; fundal-poziție: 0% 0%; dimensiunea fundalului: automat; background-repeat: repetare; fundal-atașament: scroll; fundal-origine: padding-box; clip-fond: cutie-chenar; culoare de fundal: transparent;

De exemplu, să scriem stilul prin proprietatea de fundal, definind doar culoarea de fundal (culoarea de fundal) și ordinea decupării acestuia (clip de fundal):

Fundal: caseta de conținut #aaa;

Acest cod este echivalent cu acest cod:

Imagine de fundal: niciuna; /* stânga implicit */ background-position: 0% 0%; /* stânga implicit */ background-size: auto; /* stânga implicit */ background-repeat: repetare; /* stânga implicit */ background-attachment: scroll; /* lăsat ca implicit */ background-origin: content-box; clip de fundal: caseta de conținut; culoare de fundal: #aaa;

Aici am notat acele proprietăți care nu s-au schimbat la scrierea notației abreviate. Și probabil că puteți vedea deja că proprietatea background-origin a luat aceeași valoare ca background-clip , deși nu părea că intenționăm să o schimbăm. Faptul este că background-origin și background-clip folosesc aceleași cuvinte cheie - content-box , padding-box , border-box . Și dacă specificați doar unul dintre aceste cuvinte cheie în proprietatea de fundal, atunci acesta va fi aplicat la două proprietăți simultan. Dacă trebuie să specificați valori diferite pentru background-origin și background-clip , scrieți-le unul lângă altul, separate printr-un spațiu, așa cum se arată în diagrama de mai sus (secvența este importantă aici - valoarea background-origine este mai întâi, apoi valoarea clipului de fundal).

Efectul cascadei asupra proprietăților

În prima parte a cărții noastre, în lecția despre cascada CSS, am spus că dacă o foaie de stil specifică două proprietăți identice pentru același selector, atunci se acordă preferință proprietății care se află mai jos în listă. Acum este momentul să vă amintiți această caracteristică și să vă gândiți la modul în care se comportă proprietățile grupului fundal, dacă mai multe dintre ele sunt aplicate unui element.

Să presupunem că am scris următorul cod:

Culoare de fundal: albastru; fundal: url(img/cat-transparent-bg.png) no-repeat;

Ne așteptăm să vedem o imagine a unei pisici pe un fundal albastru, dar nu a fost cazul. Se pare că a doua proprietate de fundal a suprascris prima valoare a culorii de fundal la valoarea implicită (adică transparentă). Puteți rezolva problema schimbând liniile:

Fundal: url(img/cat-transparent-bg.png) no-repeat; culoare de fundal: albastru;

Și acum o mini-sarcină: dacă în ultima linie a acestui cod înlocuiți proprietatea background-color: blue cu background-ul simplificat: blue property, ce credeți că se va întâmpla cu imagine de fundalși valoarea no-repeat?

Desigur, utilizarea proprietății de fundal „multi” poate economisi spațiu în foaia de stil și vă poate economisi timp, dar poate duce și la probleme, dintre care unele tocmai le-am acoperit. Deci folosește această proprietate cu înțelepciune. Dacă trebuie să adăugați doar o culoare de fundal, este mai bine să utilizați o proprietate separată de culoare de fundal pentru aceasta. Același lucru este valabil și pentru orice altceva.

În plus, dacă trebuie să scrieți stiluri care să ia în considerare suportul pentru browser Internet Explorer 8 (sau mai mult versiuni anterioare), iar proprietatea dvs. de fundal conține valori pentru proprietățile CSS3, browserul nu le va putea citi și va ignora complet proprietatea de fundal. Prin urmare, se recomandă să scrieți proprietățile din CSS3 separat.

Bună ziua, dragi cititori ai site-ului blogului. Astăzi ne vom uita la cinci reguli CSS care vă permit să setați un fundal pentru orice element din Html - fundal-poziție (imagine, repetare, culoare, atașament). Ei bine, să nu uităm de asemenea să menționăm regula compusă de fundal.

Nu este nimic complicat în acest sens, dar există anumite subtilități și nuanțe pe care trebuie să le cunoașteți și deja șablon gata făcut(rețineți despre, ceea ce va ajuta la dezvăluirea tuturor dezavantajelor oricărui design).

Permiteți-mi să vă reamintesc încă o dată că acest articol face parte dintr-o serie și cel mai bine ar fi să începeți studiul stilului de markup de la început, și anume cu un articol despre ce este CSS și cu ce este folosit, apoi urmați în ordinea dată. în cartea de referință. Deși, în orice caz, depinde de tine, dar acum să vorbim despre setarea fundalului.

Culoare, culoare de fundal și imagine de fundal

Să vedem mai întâi cum să setăm Culoare HTML elemente folosind Reguli de culoare CSS. De fapt, totul este simplu aici. Sintaxa este complet normală și puteți seta culoarea în conformitate cu modul în care a fost făcută în limbaj marcare hipertext. După cum vă amintiți, plasat după semnul hash (hash - „#fe35a3”) sau folosind trei cifre, dacă prima coincide cu valoarea celei de-a doua, a treia cu a patra și, respectiv, a cincea cu a șasea ( codul de culoare „#aa33ff” poate fi scris pe scurt ca „a3f”).

De asemenea, culori în Html și Cod Css poate fi reprezentat ca cuvinte (de exemplu, „roșu”), dar cel mai adesea este folosit codul hexazecimal:

Culoare:#303

De exemplu, am colorat acest mic paragraf la aceeași culoare ca mai sus (#303). Acum este ușor diferită de culoarea tuturor celorlalte paragrafe (mai întunecată), care este setată la #555 în fișier CSS folosit de mine Teme WordPress. Dar setarea culorii folosind culoarea este destul de simplă, dar cu fundalul va fi puțin mai complicat.

Asa de, pentru fundal în Css Există cinci reguli care pot fi combinate într-una singură, dacă se dorește. Pentru a le vedea, puteți accesa pagina actuală de specificații W3C și căutați orice cu cuvântul Fundal:

1. culoare de fundal - folosind această regulă, setați culoarea de fundal pentru orice element HTML. Puteți utiliza fie un cod, fie numele nuanței, de exemplu. totul este exact la fel ca atunci când folosea culoarea.

imagine de fundal - cu ea puteți folosi o imagine ca fundal (dar asigurați-vă că citiți despre ea, deoarece imaginile grele vor încetini încărcarea paginilor), calea către care va fi indicată în funcționalitatea url ().

Dacă te uiți la specificație, vei vedea asta culoarea de fundal implicită orice element va fi transparent (valoarea implicită a regulii este „background-color:transparent”). Adevărat, în elemente nu va fi transparent implicit, deoarece Acestea sunt elemente de sistem și totul despre ele este diferit și diferit de etichetele obișnuite ale limbajului de marcare hipertext.

Culoarea în culoarea de fundal este setată ca standard (șase sau trei cifre de cod hexazecimal sau un cuvânt):

Culoare de fundal: #FEFCDE

De exemplu, fundalul acestui paragraf este specificat folosind background-color cu codul de culoare dat chiar mai sus.

Toate celelalte patru reguli CSS vor afecta doar imagine de fundal, care poate fi setat pentru orice element HTML și, dacă se dorește, poziționat cu precizie. Ce fișier grafic va fi utilizat poate fi specificat folosind imagine de fundal.

Dacă vă uitați la specificația limbajului de marcare, veți vedea că imaginea de fundal este implicită la „niciuna” (adică, nu este folosită nicio imagine pentru fundal). Ei bine, dacă mai aveți nevoie de acest lucru, atunci în funcționalitatea url() va trebui să indicați calea către aceasta:

Imagine de fundal:url(https://site/image/comment_top_focus.gif);

De exemplu, pentru acest paragraf am folosit un fișier grafic cu un fundal, a cărui cale este descrisă chiar mai sus. Vedeți că întreaga zonă alocată acestui paragraf este acoperită cu o imagine care se repetă, care în original arată astfel:

Acestea. atunci când se utilizează o singură regulă imagine de fundal care indică calea către fișierul grafic, aceeași imagine va fi înmulțită atât pe verticală, cât și pe orizontală până când acoperă întreaga zonă alocată pe pagina web pentru acest element HTML specific (în exemplul nostru a fost un paragraf). De ce se întâmplă asta?

Background-repeat - repeta imaginea de fundal

Da, pentru că nu am specificat nicio valoare pentru regula CSS fundal-repetare, ceea ce înseamnă că valoarea implicită va fi utilizată pentru aceasta. Privind specificația, aflăm că această valoare corespunde „repeat” (repetă imaginea pe toate axele). Răspunsul a venit firesc.

Prin urmare, cu background-repeat putem gestionați repetările imaginilor de fundal. Această regulă poate avea doar patru semnificații:




Background-position - poziționare de fundal

Acum apare întrebarea: este posibil să mutați imaginea de fundal departe de colțul din stânga sus al zonei limitând dimensiunea elementului. Desigur că poți și există o regulă separată în acest scop. fundal-poziție:



Privind specificația CSS, devine clar de ce imaginea de fundal este apăsată în mod implicit exact în marginea din stânga sus a zonei elementului HTML. Deoarece valoarea „0% 0%” este valoarea implicită pentru regula poziției de fundal.

Ei bine, atunci când această regulă nu este setată în mod explicit pentru un element (ca în cazul nostru), atunci browserul își selectează valoarea, care este acceptată în specificație în mod implicit (rețineți că axele de coordonate în CSS sunt raportate exact din marginea din stânga sus a elementului zonă).

De asemenea, din specificație reiese clar că pentru a poziționa imaginea de fundal folosind poziția de fundal, puteți utiliza atât valori relative (procente) cât și absolute (de exemplu, ). Ei bine, puteți folosi și cuvinte care vor corespunde anumitor valori digitale. Dar mai întâi lucrurile.

Când setați poziționarea imaginii de fundal folosind unități absolute în poziția de fundal, se utilizează următorul principiu pentru a determina poziția sa finală:

Acestea. browserul va calcula offset-urile specificate de-a lungul axelor X și Y de la originea zonei în care este poziționat obiectul până la originea acestei imagini în sine. De exemplu, în acest paragraf m-am poziționat imagine de fundal prin poziția de fundal folosind următoarele reguli CSS:

Imagine de fundal:url(https://site/image/logo.png); background-repeat:no-repeat; fundal-poziție:400px 25px;

Vă rugăm să rețineți că este în în acest caz, va fi aliniat la centrul ferestrei de vizualizare și nu la centrul zonei alocate acestor paragrafe. Este clar că, în realitate, o astfel de plasare a unei imagini de fundal este puțin probabil să fie utilizată.

Cu toate acestea, dacă setați o poziție fixă ​​de fundal pentru elemente precum Body sau Html (adică în etichete care acoperă întreaga pagină web), atunci această imagine va fi întotdeauna vizibilă în zona de vizualizare și tocmai aceasta este aplicația pe care o găsește atașamentul de fundal al proprietății CSS în aspectul bloc modern.

Mai sunt ceva regulă prefabricată Context, care vă permite să combinați toate cele cinci reguli descrise mai sus într-o sticlă. Mai mult, valorile pentru toate cele cinci din versiunea combinată pot fi folosite în orice ordine și în orice cantitate (sunt unice și browserul nu le va confunda între ele). Orice ceea ce nu specificați în mod explicit va fi presupus de browser ca fiind valoarea implicită.

Png) fără repetare 50%;

Exemplul de regulă prefabricată este aplicată acestui paragraf pentru claritate. Nu a ieșit frumos, dar nu acesta este principalul lucru. Acest paragraf folosește o umplere ciudată de fundal Culoarea galbena, și utilizează, de asemenea, o imagine a siglei Liveinternet, aliniată în centrul paragrafului. Deoarece Dacă regulii de atașare de fundal nu i se dă nicio valoare, atunci se folosește valoarea de defilare (implicit).

Dacă pentru un element doriți să setați doar o umplere de culoare și să nu vă deranjați cu o imagine de fundal, atunci puteți face acest lucru:

Culoare de fundal: #FEFCDE

scrie:

Context: #FEFCDE

Deoarece toate celelalte valori ale regulii prefabricate vor fi luate în mod implicit și de asta aveai nevoie.

Multă baftă! Inainte de pe curând pe paginile site-ului blogului

Puteți viziona mai multe videoclipuri accesând

");">


S-ar putea să fiți interesat

Stil listă (tip, imagine, poziție) - reguli Css pentru personalizarea aspectului listelor în cod HTML Cum să configurați culoarea de fundal alternativă a rândurilor de tabele, liste și altele elemente HTML pe site-ul web folosind pseudoclasa a nth-child
Poziția (absolută, relativă și fixă) - metode Poziționare HTML elemente în CSS (reguli stânga, dreapta, sus și jos)
Float și clear în CSS - instrumente aspectul blocului
Poziționare cu Z-index și CSS Regula cursorului pentru a schimba cursorul mouse-ului

informatie scurta

versiuni CSS

Valori

HTML5 CSS2.1 IE Cr Op Sa Fx

Model obiect

document.getElementById("elementID").style.backgroundImage

Browsere

Versiunile de Internet Explorer până la 7.0 inclusiv aplică un fundal la chenarul interior al unui element care are setată proprietatea hasLayout. Dacă elementul nu are un hasLayout , proprietatea background-image va respecta marginile elementului, așa cum este specificat în specificație. Diferența de afișare va fi vizibilă dacă marginile sunt punctate sau punctate mai degrabă decât solide.

Dacă elementul este setat la derulare sau automat , Internet Explorer 8 va avea o întârziere verticală de un pixel atunci când fundalul derulează.

Versiunile de Internet Explorer până la 7.0 inclusiv nu acceptă valoarea de moștenire.

Dacă fundalul este setat pentru un rând de tabel (tag ), apoi Chrome, Safari, iOS îl afișează nu așa cum este prescris de specificație, și anume pentru fiecare celulă separat. În timp ce browserul ar trebui să arate un fundal solid pentru întregul rând. Exemplul 2 arată codul care demonstrează eroarea.

HTML5 CSS2.1 IE Cr Op Sa Fx

Rezultat acest exemplu V browser Chrome prezentată în fig. 1. Motor de cautare Explorer, Opera și Firefox afișează corect fundalul pentru linie (Fig. 2).

Orez. 1. Repetați fundalul pentru fiecare celulă

Orez. 2. Fundal pentru întreaga linie

De la autor: Bună ziua tuturor. Culorile și imaginile de fundal joacă un rol important în designul web, deoarece vă permit să proiectați orice elemente mai atractiv. Astăzi ne vom uita la cum să facem un fundal în HTML.

Este posibil să folosiți HTML pentru a seta fundalul?

O sa spun imediat ca nu. În general, html nu a fost creat pentru a proiecta pagini web. Este doar foarte incomod. De exemplu, există un atribut bgcolor, cu care puteți seta culoarea de fundal, dar acest lucru este foarte incomod.

În consecință, vom folosi mese în cascadă stiluri (css). Există mult mai multe oportunități pentru a stabili un fundal. Astăzi ne vom uita la cele mai elementare.

Cum să setați fundalul folosind css?

Deci, în primul rând, trebuie să decideți pentru ce element doriți să setați fundalul. Adică trebuie să găsim un selector căruia îi vom scrie o regulă. De exemplu, dacă trebuie să setați fundalul pentru întreaga pagină ca întreg, puteți face acest lucru prin selectorul de corp și pentru toate blocurile prin selectorul div. Ei bine, etc. Fundalul poate și ar trebui să fie legat de orice alți selectori: clase de stil, identificatori etc.

După ce v-ați decis asupra selectorului, trebuie să scrieți numele proprietății în sine. Pentru a seta culoarea de fundal (și anume culoare solida, nu un gradient sau o imagine) se folosește proprietatea background-color. După aceasta, trebuie să puneți două puncte și să scrieți culoarea în sine. Acest lucru se poate face în moduri diferite. De exemplu, folosind cuvinte cheie, cod hexadecimal, formate rgb, rgba, hsl. Orice metodă va funcționa.

Cea mai des folosită metodă este codul hexazecimal. Pentru a selecta culorile, puteți utiliza un program care afișează codul culorilor. De exemplu, Photoshop, vopsea sau un instrument online. În consecință, ca exemplu, voi scrie un fundal general pentru întreaga pagină web.

corp (culoare de fundal: #D4E6B3; )

Acest cod trebuie inserat în secțiunea de cap. Este important ca fișierele să fie în același folder.

Imagine ca fundal

Pentru imagine o voi folosi pictogramă mică limbaj html:

Să creăm un bloc gol cu ​​un identificator:

Să-i dăm dimensiuni și fundal explicite:

#bg( lățime: 400px; înălțime: 250px; imagine de fundal: url(html.png); )

Din acest cod puteți vedea că am folosit o nouă proprietate - background-image. Este destinat în mod special inserării unei imagini ca fundal într-un element html. Să vedem ce s-a întâmplat:

Pentru a specifica o imagine, trebuie să scrieți după două puncte cuvânt cheie url și apoi în parantezele specificați calea către fișier. În acest caz, calea este specificată pe baza faptului că imaginea se află în același folder cu documentul html. De asemenea, trebuie să specificați formatul imaginii.

Dacă ați făcut acest lucru, iar fundalul încă nu este afișat în bloc, verificați din nou dacă ați scris corect numele imaginii, dacă calea și extensia sunt setate corect. Acestea sunt cele mai multe motive comune că fundalul pur și simplu nu apare deoarece browserul nu poate găsi imaginea.

Dar ai observat un lucru? Browserul a preluat și a înmulțit imaginea pe tot blocul. Deci, ca să știți, acesta este comportamentul implicit al imaginilor de fundal - acestea sunt repetate pe verticală și pe orizontală atâta timp cât se pot încadra în bloc. Prin acest comportament, puteți controla cu ușurință. Pentru a face acest lucru, utilizați proprietatea background-repeat, care are 4 valori principale:

Repetare – valoare implicită, imaginea se repetă pe ambele părți;

Repeat-x – se repetă numai pe axa x;

Repeat-y – se repetă numai de-a lungul axei y;

No-repeat – nu se repetă deloc;

Puteți scrie fiecare valoare și puteți vedea ce se întâmplă. O sa scriu asa:

background-repeat: repetare-x;

Acum repetați doar pe orizontală. Dacă setați opțiunea fără repetare, atunci ar fi o singură imagine.

Grozav, putem termina aici, deoarece acestea sunt capabilitățile de bază ale lucrului cu fundal, dar vă voi arăta încă 2 proprietăți care vă permit să obțineți mai mult control.

Prin repetare, designerii de layout erau capabili să creeze texturi de fundal și degrade folosind o singură imagine mică. Ar putea fi de 30 pe 10 pixeli sau chiar mai mic. Sau poate un pic mai mult. Imaginea a fost de așa natură încât atunci când a fost repetată pe una sau chiar pe ambele părți, nu erau vizibile tranziții, astfel încât rezultatul a fost un fundal unic, fără sudură. Apropo, această abordare ar trebui folosită acum dacă doriți să o utilizați textură fără sudură pe site-ul dvs. ca fundal. Astăzi, un gradient poate fi deja implementat folosind metode css3, despre asta vom vorbi cu siguranță mai târziu.

Poziția de fundal

În mod implicit, imaginea de fundal, cu excepția cazului în care este setată să se repete, va fi în partea stângă colțul de sus blocul tău. Dar poziția poate fi schimbată cu ușurință folosind proprietatea background-position.

Îl puteți seta în moduri diferite. O opțiune este să indicați pur și simplu părțile în care ar trebui să fie amplasată imaginea:

poziție de fundal: dreapta sus;

Adică pe verticală totul rămâne la fel: imaginea de fundal este situată deasupra, dar pe orizontală am schimbat partea spre dreapta, adică dreapta. O altă modalitate de a seta o poziție este ca procent. În acest caz, numărătoarea inversă începe în orice caz din colțul din stânga sus. 100% - întregul bloc. Astfel, pentru a plasa poza exact în centru, o scriem astfel:

fundal-poziție: 50% 50%;

Amintiți-vă un lucru important despre poziționare - primul parametru este întotdeauna poziția orizontală, iar al doilea este poziția verticală. Deci, dacă vedeți o valoare de 80% 20%, atunci puteți concluziona imediat că imaginea de fundal va fi deplasată mult spre dreapta, dar nu va scădea prea mult.

Și, în sfârșit, puteți specifica poziția în pixeli. Totul este la fel, doar că în loc de % va fi px. În unele cazuri, o astfel de poziționare poate fi necesară.

Notație scurtă

Sunteți de acord că codul se dovedește a fi destul de greoi dacă totul este setat așa cum am procedat noi. Se pare că trebuie specificată calea către imagine, repetarea și poziția. Desigur, repetarea și poziția nu sunt întotdeauna necesare, dar, în orice caz, ar fi mai corect să folosiți o notație scurtă pentru proprietate. Arata cam asa:

fundal: #333 url(bg.jpg) no-repeat 50% 50%;

Adică, primul pas este să înregistrați culoarea generală de fundal solidă, dacă este necesar. Apoi calea către imagine, repetare și poziție. Dacă nu este necesar un parametru, atunci pur și simplu omiteți-l. De acord, acest lucru este mult mai rapid și mai convenabil și, de asemenea, ne reducem semnificativ codul. În general, vă sfătuiesc să scrieți întotdeauna în formă prescurtată, chiar dacă trebuie să indicați doar o culoare sau o imagine.

Controlul dimensiunii imaginii de fundal

Imaginea noastră actuală nu este foarte bună pentru a demonstra următorul truc, așa că voi lua altul. Lasă-l de dimensiunea unui bloc sau mai mare. Așadar, imaginați-vă că vă confruntați cu sarcina de a realiza o imagine de fundal, astfel încât să nu-și umple complet blocul. Iar imaginea, de exemplu, este chiar mai mare decât dimensiunea blocului.

Ce poți face în acest caz? Desigur, cea mai simplă și mai rezonabilă opțiune ar fi pur și simplu reducerea imaginii, dar nu este întotdeauna posibil să faceți acest lucru. Să spunem că se află pe server și în acest moment nu există timp sau oportunitate pentru a o reduce. Problema poate fi rezolvată folosind proprietatea background-size, care poate fi numită relativ nouă și care vă permite să manipulați dimensiunea imaginii de fundal și, într-adevăr, orice fundal.

Deci imaginea mea ocupă acum tot spațiul din bloc, dar îi voi da o dimensiune de fundal:

dimensiunea fundalului: 80% 50%;

Din nou, primul parametru setează dimensiunea orizontală, al doilea - dimensiunea verticală. Vedem că totul a fost aplicat corect - fotografia a devenit 80% din lățimea blocului în lățime și jumătate în înălțime. Aici trebuie doar să faceți o clarificare - setând dimensiunea ca procent, puteți influența proporțiile imaginii. Asa ca aveti grija daca vreti sa nu suparati proportiile.

După cum puteți ghici, dimensiunea fundalului poate fi specificată și în pixeli. Mai sunt două cuvinte cheie care pot fi, de asemenea, folosite:

Coperta – imaginea va fi scalată astfel încât cel puțin pe o parte să umple complet blocul.

Conține – o scalează astfel încât imaginea să se potrivească complet în bloc la dimensiunea sa maximă.

Avantajul acestor valori este că nu schimbă proporțiile imaginii, lăsându-le la fel.

De asemenea, ar trebui să înțelegeți că întinderea imaginii poate duce la o deteriorare a calității acesteia. Pot da un exemplu din viața și practica reală a designerilor de layout. Toată lumea știe și înțelege că atunci când proiectați pentru desktop-uri, trebuie să adaptați site-ul la lățimile principale ale monitorului: 1280, 1366, 1920. Dacă luați o imagine de fundal cu o dimensiune de, să zicem, 1280 pe 200 și nu o dați o dimensiune de fundal, apoi vor apărea ecrane cu o lățime mai mare loc gol, imaginea nu va umple complet lățimea.

În 99% din cazuri, acest lucru nu se potrivește dezvoltatorului web, așa că el setează dimensiunea fundalului: acoperire, astfel încât imaginea să se întindă întotdeauna la lățimea maximă a ferestrei. Acest bun venit, care ar trebui folosit, dar acum vă veți confrunta cu problema că utilizatorii cu lățimea ecranului de 1920 pixeli pot vedea o calitate suboptimă a imaginii.

Permiteți-mi să vă reamintesc, se va întinde până la lățimea maximă. În consecință, calitatea se va deteriora automat. Numai decizia corectă va folosi inițial imaginea de aici dimensiune mai mare– 1920 pixeli lățime. Apoi, pe cele mai largi ecrane, va fi în dimensiunea sa naturală, iar pe altele va fi pur și simplu decupat treptat, dar, în același timp, cu o selecție adecvată a imaginii de fundal, aspect Acest lucru nu va afecta site-ul.

În general, acesta este doar un exemplu despre cum să utilizați cunoștințele pe care le-ați dobândit în acest articol atunci când amenajați machete reale.

Fundal translucid folosind css

O altă caracteristică cu care se poate implementa folosind css – semi fundal transparent. Adică prin acest fundal se va putea vedea ce este în spatele lui.

De exemplu, voi seta întreaga pagină ca fundal pentru imaginea pe care am folosit-o mai devreme în exemple. Pentru blocul cu identificatorul bg, pe care ne desfășurăm toate experimentele, vom seta fundalul folosind formatul sarcinii culori rgba.

După cum am spus mai devreme, există multe formate pentru setarea culorilor în CSS. Unul dintre ele este rgb, un format destul de cunoscut pentru cei care lucrează în el editori grafici. Se scrie astfel: rgb(17, 255, 34);

Prima valoare dintre paranteze este saturația de roșu, apoi verde, apoi albastru. Valoarea poate fi numerică de la 0 la 255. În consecință, formatul rgba nu este diferit, se adaugă doar un parametru - canalul alfa. Valoarea poate fi de la 0 la 1, unde 0 este transparența completă.

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 atribuirea obișnuită a unei imagini sau culori ca fundal de pagină. Unele lucruri vor fi familiare, în timp ce altele vor fi probabil noi 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, cum ar fi transparența și alocarea mai multor imagini ca fundal, dar despre asta vom vorbi mai jos, dar mai întâi ne vom uita la elementele de bază ale proprietății. fundal.

culoare de fundal

Sunt mai mult decât sigur că ați atribuit deja culoarea de fundal de mai multe ori. Acest lucru se poate face folosind mai multe tipuri de notație: obișnuită (se folosește numele culorii), notație hexazecimală sau RGB. Fiecare tip este echivalent, utilizați ceea ce vă place mai mult. Încerc să folosesc cea mai scurtă opțiune, iar pentru o percepție mai ușoară, fișierul de stil rezultat 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;))

CSS3 acceptă transparența, așa că o putem adăuga la culoarea noastră, de exemplu astfel:

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

Ultima cifră a stabilit transparența la 50%. 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 a adăugat capacitatea de a atribui mai multe imagini fundalului, fiecare creându-și propriul strat, astfel încât fiecare ulterioară să se suprapună pe cea anterioară. De ce ar putea fi util acest lucru? Totul este destul de simplu - să presupunem că trebuie să înșurubați mici bibelouri î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”, mutăm fiecare imagine în propriul colț și atât, problema este rezolvată

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

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

• a stabilit culoare contrastantă fundal în cazul în care utilizatorul nu vede imaginea dintr-un motiv oarecare. Pur și simplu poate opri afișarea imaginilor, economisind trafic.
• nu utilizați o imagine de fundal pentru a transmite niciuna Informații importante. Din motivele expuse mai sus, este posibil ca utilizatorul să nu-l vadă.

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