Share
Am creat un ghid complet care să vă ajute să învățați CSS, indiferent dacă începeți doar cu elementele de bază sau doriți să explorați CSS mai avansat.
În acest tutorial vom examina una dintre proprietățile CSS mai vechi și mai familiare: fundal. fundal este una dintre mai multe proprietăți CSS ale căror caracteristici sunt adesea trecute cu vederea. De fapt, a văzut un upgrade cu CSS3, primind noi capabilități dincolo de adăugarea unei imagini de fundal sau a unei culori. Să ne uităm la unele dintre ele!
Poziționarea unui grafic de fundal este simplă și ceva cu care probabil vă cunoașteți deja. Dacă vrem să poziționăm fundalul în partea dreaptă jos a elementului, aplicăm dreapta-jos la background-position. De exemplu:
#workspace width: 100%; max-lățime: 668px; înălțime: 400px; fundal-culoare: # 525d62; fundal-imagine: url (imagini / macbook.png); background-repeat: nu-repeta; fundal-poziție: fundul drept;
Sau, cu stenograma, fundal, după definiția urlului:
#workspace width: 100%; max-lățime: 668px; înălțime: 400px; fundal: # 525d62 url (imagini / macbook.png) nu-repeta dreapta jos;
De la apariția CSS3 am reușit să specificăm poziția compensate; distanțele precise ale pozițiilor stabilite. Luând exemplul nostru dreapta-jos, noi includem bottom 20px dreapta 30px pentru a ne poziționa fundalul la 20px din partea de jos și 30px din stânga.
#workspace width: 100%; max-lățime: 668px; înălțime: 400px; fundal-culoare: # 525d62; fundal-imagine: url (imagini / macbook.png); background-repeat: nu-repeta; pozitie fundal: dreapta 30px jos 20px;
Pozițiile (fund, top, dreapta, stânga) poate fi definit în orice ordine, dar lungimea de compensare trebuie definită după fiecare poziție de fundal.
Creditul se adresează lui Metin Kazan pentru ilustrații.
fundal Proprietatea ne permite de asemenea să adăugăm mai multe imagini de fundal. Prin urmare, să extindeți exemplul nostru anterior cu mai multe lucruri și obiecte gadget.
Adăugăm aceste imagini la un singur fundal sau imagine de fundal declarație separând fiecare cu o virgulă. Noi folosim background-position proprietate, care acceptă și mai multe valori, pentru a controla fiecare dintre aceste imagini de fundal.
#workspace height: 400px; fundal-culoare: # 525d62; imagine-url (imagini / ipd.png), url (imagini / ipad.png), url (imagini / ipd.png) (imagini / cafe.png), url (imagini / camera.png); background-repeat: nu-repeta; Poziția de fundal: 50% 50%, / * macbook.png * / 75% 295px, / * mouse.png * / 75% 230px, / * hdd.png * / 96% 240px, / * phone.png * / 20 % 250px, / * ipad.png * / 22% 190px, / * cafe.png * / 7% 280px; / * camera.png * /
Putem folosi unități fixe (cum ar fi pixeli), unități flexibile (cum ar fi procente) sau o combinație a celor două.
Fiecare pereche de valori reprezintă coordonatele din stânga sus a elementului containerului, la stânga sus a imaginii. De exemplu, imaginea de pe partea stângă sus a imaginii camerei este de 280 de pixeli din partea de sus a containerului, apoi de 7% din imagine disponibil lățimea de la stânga.
Notă: The disponibil lățimea este lățimea totală a elementului containerului, minus lățimea imaginii de fundal. Prin urmare, o imagine de fundal poziționată la 50% de-a lungul axei x apare exact centrat!
În plus, din moment ce background-position este o proprietate animabilă, putem crea un fundal mai plin de viață, convingător:
#workspace width: 600px; înălțime: 400px; fundal-culoare: # 525d62; background-repeat: nu-repeta; imagine-url (imagini / ipd.png), url (imagini / ipad.png), url (imagini / ipd.png) (imagini / cafe.png), url (imagini / camera.png); fundal-poziție: 50% 50%, 430px 295px, 425px 230px, 480px 240px, 105px 250px, 120px 190px, 40px 280px; animație: 3s ușurință 0s inView înainte; @inframele de chei inView 0% background-position-y: 600%, 451px, -448px, 240px, 496px, -44px, 280px; fundal-poziția-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; 20% background-position-y: 50%, 451px, -448px, 240px, 496px, -44px, 280px; fundal-poziția-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; 30% background-position-y: 50%, 295px, -448px, 240px, 496px, -44px, 280px; fundal-poziția-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; 40% background-position-y: 50%, 295px, 230px, 240px, 250px, -44px, 280px; fundal-poziția-x: 50%, 75%, 75%, 200%, 0%, 22%, -100%; 50% background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px; fundal-poziția-x: 50%, 75%, 75%, 96%, 0%, 22%, -100%; 60% background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px; fundal-poziția-x: 50%, 75%, 75%, 96%, 0%, 22%, 7%; 100% background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px;
Aici am creat un număr de cadre cheie de-a lungul unei linii de timp. La fiecare cadru cheie am modificat background-position-x și background-position-y din fiecare imagine de fundal. Animația este adesea rudimentară, așadar vă rugăm să lăsați furculița CodePen și să o îmbunătățiți!
Notă: Clic Rerun în colțul din dreapta jos al pixului pentru a vedea animația
Fundalurile pe care le-am folosit sunt ordonate succesiv; primul listat apare în partea de sus a stiva, în timp ce ultimul listat va apărea în partea de jos a stiva de fundal.
#workspace width: 600px; înălțime: 400px; fundal-culoare: # 525d62; imagine-url (imagini / ipd.png), url (imagini / ipad.png), url (imagini / ipd.png) (imagini / cafe.png), url (imagini / camera.png); / * stivuite în partea de jos * / background-repeat: no-repeat;
Toate sub-proprietățile de fond (fundal repetare, background-size, background-position etc) pot fi definite de mai multe ori, cu excepția culoare de fundal. Dacă aplicăm mai multe fundaluri folosind stenograma fundal proprietăți, definiți culoarea de fundal ca fiind cea mai recentă valoare care va intra în vigoare. De exemplu:
#workspace height: 400px; fundal: url (imagini / macbook.png) 50% 50% no-repeat, url (imagini / mouse.png) 430px 295px no-repeat, url (images / camera.png) 425px 230px no-repeat # 525d62;
Alternativ, adăugați o secțiune separată culoare de fundal, ca urmare a proprietății scurte:
#workspace width: 600px; înălțime: 400px; fundal: url (imagini / macbook.png) 50% 50% no-repeat, url (imagini / mouse.png) 430px 295px no-repeat, url (images / camera.png) 425px 230px no-repeat; fundal-culoare: # 525d62;
Ambele coduri fac același lucru, dar cred că acesta din urmă este mai intuitiv și mai lizibil.
fundal-amestec-mode se întâmplă la fel ca în aplicațiile grafice cum ar fi Photoshop sau Gimp; se amestecă imaginile de fundal unul cu celălalt, precum și cu ceea ce este dedesubt.
fundal-amestec-mode ia valori familiare, cum ar fi acoperire și multiplica printre câțiva alții, pe care Jonathan Cutrell face o lucrare fantastică de a-și explica în tutorialul său pe această temă. Îți recomand foarte mult să le citești, pentru a putea sări în câteva exemple practice.
Există mai multe moduri de utilizare a modului de amestecare CSS pentru a crea un design remarcabil, cum ar fi îmbinarea unui gradient cu o imagine, pe care Ian Yates o subliniază în rolurile sale de inspirație:
Pentru a crea acest efect, adăugăm o imagine de fundal și un gradient și aplicăm acoperire mod de amestecare.
Accentsconagua
#blend background-repeat: no-repeat; background-image: url ('img / people-15.jpg'), gradient linear (135deg, rgba (175,0,79,1) 0%, rgba (255,114,187,1) 100%); fundal-blend-mode: suprapunere; Suprapunerea influențează ambele fundaluri afișate aici, astfel încât este posibil să fiți precauți dacă nu doriți ca totul să se amestece împreună. Dacă vrem să evităm orice amestecare cu culoarea de fundal, setați a doua valoare la normal care se va aplica celei de-a doua imagini de fundal.
#blend background-repeat: no-repeat; background-image: url ('... /img/people-15.jpg'), gradient liniar (135deg, rgba (175,0,79,1) 0%, rgba (255,114,187,1) 100%); fundal-culoare: galben; fundal-blend-mode: suprapunere, normal; fundal clip proprietate este un utilitar care controlează modul în care culoarea de fundal și intervalul de imagine se încadrează în modelul cutiei de conținut CSS. Similar cu box-dimensionare proprietate, fundal clip proprietatea ia trei valori valide, și anume:
frontieră-box este valoarea implicită care acoperă imaginea de fundal sau culoarea până la marginea exterioară a elementului.padding-box va acoperi fundalul până la marginea exterioară a plăcuței, sau cu alte cuvinte; marginea interioară a frontierei.conținut-box va păstra fundalul din conținutul elementului, după cum se arată mai jos:Un exemplu practic pe care l-am găsit fundal clip pentru a fi la îndemână este când trebuie să creez un buton cu o pictogramă, folosind un singur element. În următoarea demonstrație, imaginea noastră se întinde de la marginea stânga la dreapta a elementului, chiar dacă adăugăm umplutură pe fiecare parte, deoarece se aplică încă frontieră-box.
Dacă vrem să înconjoară pictograma cu un pic de spațiu alb, ar trebui în mod tradițional să o înfășurăm cu un alt element și să aplicăm umplutura pe acel element suplimentar. Utilizarea fundal clip proprietate, suntem capabili să o facem elegant prin stabilirea lui conținut-box, și înlocuiți căptușeala cu margini de aceeași culoare ca culoarea de fundal.
fundal proprietatea este una pe care o folosim frecvent în proiectele noastre. Sperăm că acest articol ți-a amintit de utilizarea sa largă și variată și aștept cu nerăbdare să aud mai multe idei în comentarii.
O notă finală: suport pentru browser pentru aceste proprietăți (cu excepția fundal-amestec-mode) sunt grozavi. Potrivit CanUUse, mai multe medii de fundal sunt suportate din nou de pe Internet Explorer 9, cu doar câteva probleme triviale. Opțiunile imaginii de fundal, cum ar fi fundal clip proprietate, este aproape la fel de bun.
Modelele de combinare, la momentul scrisului, funcționează cel mai bine în Chrome, Opera, sunt parțial aplicabile în Safari datorită câtorva bug-uri, însă, din păcate, nu au făcut niciun semn de progres cu Microsoft Edge.
