Personalizați fundalul folosind css. Fundal în CSS (culoare, poziție, imagine, repetare, atașament) - totul pentru setarea culorii de fundal sau a imaginii de fundal a elementelor HTML

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 cel mai mult versiune scurta, iar pentru o percepție mai ușoară și 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;))

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 (complet fundal 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 posibilitatea 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.

Una dintre cele mai comune sarcini la editarea textului și a blocurilor în HTML și CSS. Nu numai un designer de aspect, ci și orice manager de conținut care editează conținutul unui site web poate întâmpina această problemă. Pentru solutii această problemă sunt folosite doar două proprietăți: culoare - culoarea textului, fundal - lucrul cu fundalul, culoarea sau imaginea.

Lucrul cu culoarea de testare în CSS

culoare este o proprietate necesară pentru a specifica o culoare numai pentru text. Culoarea poate fi specificată fie în format de cod HTML HEX, fie în format RGB (Roșu, Verde, Albastru). Codurile de culoare pot fi selectate fie în programe de grafică, de exemplu, Photoshop sau online

Sintaxa proprietății:

Culoare: Culoare;
Acum aplicăm proprietatea:

Continut (
culoare: #444; // text gri închis într-un element cu clasa de conținut
}
De ce exact acest exemplu: specificarea culorii pentru link și pentru text sunt lucruri diferite. Tine minte. Ei bine, personal recomand să faceți textul și linkurile în culori diferite.

Lucrul cu fundaluri în CSS

fundal este o proprietate care vă permite să lucrați cu fundalul unei imagini: setați culoarea de fundal, setați o imagine ca fundal ( formate jpg, gif, png), modificați poziția de fundal și alți parametri descriși mai jos.

culoare de fundal- Această proprietate este folosită numai pentru a seta culoarea de fundal. Acceptă doar codul de culoare. Culoarea poate fi specificată în format RGB (Red Green Blue) sau în format HTML HEX cod.

Bloc (
culoare de fundal: #fbb5b5; // setați culoarea de fundal la stacojiu pastel
}
Cele mai bune exemple de culori de fundal (modele de design modern: Design plat si etc):

imagine de fundal este o proprietate care este folosită pentru a seta o imagine ca fundal într-un element. Pentru a specifica o imagine, parametrul url și calea către imagine în raport cu fișierul cu stiluri CSS sunt suficiente.

#înapoi (
imagine de fundal: url("imagini/fon.jpg");
}

fundal-repetare- poate fi folosit numai dacă proprietatea imagine de fundal a fost specificată mai sus. Această proprietate stabilește regula de repetare a imaginii. În mod implicit, imaginea se repetă de-a lungul axei X și de-a lungul axei Y până la marginile elementului (dacă fundalul este mai mic decât elementul). În proprietate, puteți specifica o setare astfel încât imaginea să fie repetată numai de-a lungul axei X - repetare-x (orizontal), numai de-a lungul axei Y - repetiție-y (verticală) sau deloc repetă - fără repetare.

#conținut (

background-repeat: repetare-x; /* imaginea se va repeta doar orizontal până la limitele blocului */
}

atașament de fundal- fixează fundalul într-o singură poziție, adică imaginea va derula împreună cu conținutul blocului sau va rămâne fixă. Valoarea implicită este scroll, care nu fixează poziția de fundal.

#conținut (
imagine de fundal: url("background.jpg");
background-repeat: repetare-x; /* imaginea se va repeta doar orizontal */
fundal-atașare: fix; /* fixat la locație */
}

fundal-poziție- o proprietate care specifică locația fundalului în element. Sunt specificate două valori: poziția orizontală și apoi poziția verticală. Este specificat fie digital (pixeli și procente), fie alfabetic (stânga, centru, dreapta, sus, jos). Această proprietate este necesară atunci când imaginea nu este repetată (no-repeat), iar fundalul trebuie poziționat într-un anumit mod în element.

#bloc (
fundal-poziție: centru stânga; /* orizontal - în partea stângă, vertical - în mijloc */
}
Cred că totul este clar în comentariu)
Un exemplu de scriere a unei valori digitale:

#chei (
fundal-poziție: 109px 57px; /* marginea din stânga 109px, sus 57px */
}
Și aici cred că totul ar trebui să fie clar.
Multe proprietăți? Să vedem cum se scrie prescurtat.

În cele din urmă. Prescripție pentru fundal în CSS

Puteți utiliza o notație prescurtată, în care toți parametrii vor fi indicați în linie:

Fundal: imagine color repeta atasamentul poziţie;

Despre avantaje. Acest tip de înregistrare reduce timpul de încărcare a paginii și redarea browserului. Fiți milă de vizitatorii dvs., este mai bine să scrieți astfel, cu excepția cazului în care, desigur, aveți nevoie de mai multe proprietăți.
Da, puteți sări peste orice proprietate dacă nu este nevoie de ea! Continuați doar să specificați valorile mai jos în listă.

Bloc (
fundal: #f1f1f1 url("background.jpg") repetare-x derulare 100px 125px;
}

Un exemplu despre cum funcționează fundalurile în CSS

Exemplu de cod. Puteți vedea rezultatul lucrării și codul sursă la linkul de mai jos.

În cazul unei imagini de fundal, este mai bine să specificați dimensiunile blocului, altfel acesta va fi dimensionat în funcție de conținut.

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 culoare de fundal, dar este foarte incomod.

În consecință, vom folosi Cascading Style Sheets (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 un fundal 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 o culoare solidă, nu un gradient sau o imagine), utilizați 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 metoda va funcționa.

Metoda cea mai des folosită cod 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

Voi folosi o pictogramă mică pentru imagine. limbaj html:

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

< div id = "bg" > < / div >

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

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

#bg( latime: 400px; înălțime: 250px; fundal - imagine : 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, apoi indicați calea către fișier între paranteze. Î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;

fundal - repetare : 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 aspect erau capabili să creeze texturi de fundal și degrade folosind o singură imagine minusculă. 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, gradientul 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 colțul din stânga sus al blocului său. Dar poziția poate fi schimbată cu ușurință folosind proprietatea background-position.

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

poziția de fundal: dreapta sus;

fundal - poziție: 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%;

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 valoarea 80% 20%, atunci puteți concluziona imediat că imaginea de fundal va fi deplasată foarte mult la dreapta, dar nu va coborî 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%;

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. Și 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 este relativ nouă și vă permite să manipulați dimensiunea imagine 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%;

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 chiar la ecrane late va avea 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, pe 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 – fundal translucid. 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 de setare a culorii rgba.

După cum am spus mai devreme, există multe formate pentru setarea culorilor în CSS. Unul dintre ele este rgb, destul format binecunoscut celor care lucrează în 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ță, format rgba nu este diferit, este adăugat doar un singur parametru - canalul alfa. Valoarea poate fi de la 0 la 1, unde 0 este transparența totală.