Fundalul este o proprietate cu care puteți seta fundalul unui element. Fundalul poate fi colorat sau chiar conține imagini. În acest articol vă voi spune despre toate posibilitățile acestei proprietăți și voi arăta un truc cu ajutorul căruia mai multe obiecte pot fi redate simultan de fundalul unui obiect.
Oricine a deschis vreodată un tutorial HTML. cunoaște proprietățile pe care le specifică fundalul elementului:
Text text text.
În CSS, acestea sunt combinate într-o singură proprietate comună - fundal.
Text text text.
Pentru a testa această proprietate, "fără a pleca de la biroul de bilete", vom încerca să o aplicăm pe un bloc simplu
Deci, cunoașteți-vă, aceasta este ↑ our
E mai distractiv, nu-i așa? Culoarea poate fi setată în moduri diferite: după nume (portocaliu), hex cifră HEX (# ff8c00) sau cod RGB (255,165,0). Numele sunt rareori utilizate, deoarece în diferite browsere diferite nume uneori corespund unor culori ușor diferite. Cel mai adesea, culoarea este notată cu șase.
Toate cele trei înseamnă aceeași culoare portocalie. Cu culoarea fãcutã afarã. Acum vrem să adăugăm o imagine de fundal. De exemplu, aici este următorul:
Principalul lucru este că ornamentul de pe imagine este repetat în mod egal. Dacă cineva este interesat, pot oferi un excelent generator de fundaluri dungate. să nu le numere pe toți pixelii.
Acum, diva noastră nu este doar portocalie, ci și dungă.
"Este ușor", veți spune. "Același lucru se poate face și cu bgcolor și fundal fără CSS!"
Așa e. Prin urmare, vom lua în considerare un caz mai complicat în care nu putem face un singur cod HTML. Să spunem că vrem să punem un loc pe fundal:
Acum div a devenit amețit. Nu vrem atât de multe locuri. Să facem ca petele să se repete doar orizontal.
Sau doar pe verticală.
Sau poate e mai bine să părăsești un singur loc?
Da, un singur loc este suficient, dar pe stânga se află în cale. Să-l mutăm în centru.
Sau poate e mai bine în colțul din dreapta jos?
Este principiul clar? Exemplele pot continua pe termen nelimitat. Pentru voi, atunci nu visezi despre aceste dreptunghiuri portocalii, voi termina cu exemple și scriu toate valorile posibile ale proprietății de fundal de mai jos:
fundal-culoare: roșu; - culoarea roșie după nume
fundal-culoare: # ff0000; - cod HEX roșu
fundal-culoare: rgb (255,0,0); - culoare roșie RGB
fundal-culoare: transparent; - culoare transparentă
background-repeat: repetați; - derulați fundalul orizontal și vertical
background-repeat: repeat-x; - derulați numai fundalul orizontal
background-repeat: repeat-y; - derulați fundalul numai vertical
background-repeat: nu-repeta; - nu derulați fundalul
pozitie fundal: 40% 70%; - imaginea este la 40% din marginea din stânga a ecranului și 70% din marginea superioară a ecranului
fundal-poziție: 200px 500px; - imaginea este de 200 de pixeli în partea dreaptă a marginii din stânga a ecranului și la 500 de pixeli sub marginea superioară a ecranului
pozitie fundal: stanga sus; - colțul din stânga sus al ecranului
pozitie fundal: centru stanga; - partea stângă a ecranului
fundal-poziția: partea stângă; - colțul din stânga jos al ecranului
poziția fundalului: partea dreaptă; - colțul din dreapta sus al ecranului
fundal-poziție: centru dreapta; - partea dreaptă a ecranului
fundal-poziție: fundul drept; - colțul din dreapta jos al ecranului
pozitie fundal: centru de sus; - în partea superioară din centru
fundal-poziție: centru centru; - chiar centrul ecranului
fundal-poziție: fund central; - la parter în centru
atașament de fundal: fix; - în timp ce pagina se derulează, imaginea de fundal este în vigoare
atașament de fundal: derulați; - în timp ce pagina se derulează, imaginea de fundal se deplasează împreună cu conținutul
Acestea sunt toate valori posibile. Doar pentru a nu le picta pe o mulțime de linii, ca în versiunea noastră:
Ele sunt, de obicei, compacte pentru confort într-o versiune mai compactă:
Pe această descriere poți termina, dar înainte de asta vreau să-ți arăt chipul, pe care l-am scris în introducere - despre cum să rezolvi un obiect în același timp cu mai multe imagini de fundal. Vă avertizez imediat: nu va funcționa pentru toată lumea, deoarece nu toate browserele suportă CSS3. Prin urmare, ceea ce am arătat acum, puteți folosi auxiliar, dar în nici un caz nu vă bazați pe acest lucru absolut.
Să ne aducem aminte de ultima oară când a apărut dreptunghiul nostru portocaliu. Până acum, am plasat fie niște benzi sau pete în el. Și dacă am vrea amândouă? În CCS3, puteți impune un număr nelimitat de imagini, împărțind pur și simplu proprietățile de fundal cu o virgulă.
Spuneți-vă "la revedere" diva noastră îndelungată și acum luați în considerare un exemplu mai complicat, unde trebuie să includeți mai multe imagini diferite și să le aranjați pe diferite părți ale paginii. Luați, de exemplu, celebrul șablon "Hobbit" de la Arcsin. Deschideți versiunea originală a șablonului. pentru a avea în fața ochilor tăi. Fundalul constă din următoarele fragmente:
fundal de bază
repetate orizontal și vertical
Trimiteți-le prietenilor: