Cum de a face site-ul de fundal HTML pentru poziția, repetiție, etc.

În doar câțiva ani pe internet am găsit un număr de site-uri și servicii utile, care nu sunt direct legate de construirea site-ului și tema generală a acestui blog, dar am vrut doar sa le recomanda pentru tine:

Servicii de Cashback. cum ar fi Epn.bz și Letishops. Prima va economisi până la 15% pe Aliekspress iar al doilea stint cu Cash Back de mai mult de 1.000 de magazine online. bilete de avion, doar servicii excelente - Aviasales.ru. Căutări pe sute de site-uri și oferă toate opțiunile pentru bilete, puteți alege cel mai ieftin sau cele în care există mai puțin timp de călătorie. Ei au, de asemenea, o mare gloată. aplicații și plugin pentru browser.

Având în vedere că punerea în aplicare a acestui obiectiv, avem nevoie de un css-fișier, trebuie să creați și să se conecteze la html. Este scris în acest articol. Puteți apoi începe să lucreze. În primul rând, trebuie să decideți cu ceea ce doriți să setați fundalul. Dacă întreaga pagină ca un întreg, se poate face după cum urmează:

Corp culoare de fundal: alb;
>

Asta este, ne uităm la tag-ul corpului. care reprezintă tot site-ul nostru. Pentru a seta culoarea de fundal folosind proprietatea background-color. Dar ce se întâmplă dacă aveți nevoie pentru a seta ca imagine de fundal, mai degrabă decât o culoare solida? Apoi, este necesar să se scrie asa:

Corp background-image: url-ul (calea către modelul risunku.rasshirenie)
>

Pentru claritate, propunem să ia în considerare toate detaliile exemplului. Pentru a face acest lucru, voi folosi această imagine:

De exemplu, background-image: url-ul (comp.png). În acest exemplu, am stabilit o imagine de fundal cu numele de comp (asta e ceea ce am numit-o) png, care se află în același folder ca css-fișier.
Html va crea un bloc arbitrar cu dimensiuni specifice pentru afișarea pe lucru css-proprietăți.

Și stiluri de la ea:

#ct background-image: url-ul (comp.png);
lățime: 600px;
height: 400px;
>

Asta e ceea ce avem:

De ce? Faptul că browser-ul implicit repetă imaginea cât de multe ori pentru a umple complet unitatea. Uneori este necesar și, de exemplu, atunci când se utilizează modele fără sudură, dar în acest caz ar trebui să fie o imagine. Din fericire, acest lucru poate fi foarte ușor de gestionat.

fundal repetitivă

Dacă aveți o imagine ca fundal, atunci în mod implicit, va fi repetat pe orizontală și pe verticală pentru a umple întregul spațiu al paginii. Pentru a elimina, utilizați proprietatea background-repeat și valoarea sa nu-repeta (nu se repetă). De asemenea, au următoarele valori:

• Repetare-x - pentru a repeta numai pe orizontală
• Repetare-y - numai pe verticală

Completați proprietățile noastre de fundal grafic:

Context poziția proprietate specifică un loc unde va exista o imagine. Există două valori este dat - atât pe orizontală cât și pe verticală. Exemple: background-position: dreapta jos - poziția din dreapta jos, sus-stânga - pentru a coborî de sus (și deci implicit), 250px 500px - decalate de la colțul din stânga sus spre dreapta de 250 de pixeli și 500 în jos.

Să ne uităm la un exemplu:

background-position: dreapta sus;

Imagine muta la marginea din dreapta sus. I-am dat unitatea și fundal galben, astfel încât să puteți vedea marginile.

background-position: 50% până la 50%;

va apărea exact în mijlocul blocului său din imagine. Da, acest lucru este posibil datorită interesului în poziția de înregistrare.

background-position: 70% 20%;

Context mutat la 70% orizontal și 20 vertical.

Permisiunea este, de asemenea, în pixeli specificați o valoare poziție negativă. Este permis să facă, de exemplu, atunci când utilizați un sprite mare imagine și aveți nevoie pentru a pune în cutiile trebuie să facă parte din această sprite.

securizarea fundal

Îmi place foarte mult de o caracteristică numită background-attachment. El are doar două valori, iar primul este implicit (parcurgere). Acest lucru înseamnă că, atunci când derulați pagina fundalul va fi, de asemenea defilat, iar dacă utilizați o imagine fără repetiție, în cele din urmă termina și apoi du-te doar o culoare solidă.

Pentru a evita acest lucru, prescris de fond-atașament: fix, iar acum de fundal nostru este în siguranță, în loc. Acest lucru poate fi comparat cu modul în care unitatea pentru a determina o poziționare fixă, și nu va dispărea de pe pagina de când defilați prin ea.

Prescurtare pentru toate aceste lucruri

Suntem dezmembrate multe proprietăți care fac posibilă pentru a face fundal, dar dacă folosiți-le pe toate, este o înregistrare urâtă. Există o soluție foarte elegantă. proprietate de fundal permite separate de un spațiu pentru a scrie setările în această ordine:
Context: culoarea poziției de repetare a imaginii de siguranță;
Și acum poate fi scris ca:

fundal: url galben (comp.png) no-repeta 20% 100px;

Dacă unii nu au nevoie pentru a defini o proprietate, aceasta este pur și simplu omis (în cazul nostru, nu am înregistra background-attachment).

multe fundaluri

Și dacă aveți nevoie de mai multe imagini de fundal? Se întâmplă, ce se poate face. Astăzi css acceptă. Să ne și vom încerca. Luați această pictogramă

Am sunat laptopul.

Și aici este codul pentru a insera MultiFon:

fundal: url (comp.png) fără repetare 20% 100px,
url (laptop.png) no-repeat 50% 50%;
culoare de fundal: galben;

După cum puteți vedea, doar suficient pentru a pune o virgulă după prima imagine, și înregistra setările pentru al doilea. culoare solidă, în acest caz, este mai bine să solicite separat.

În același mod poate fi scris orice număr de imagini, dar nu exagera - prea mult grafica nu este foarte bun.

Aici în acest sens, aș dori să termin acest articol. Pe fundal puteți face o mulțime de alte lucruri interesante despre ele voi încerca să scrie în viitor (ca ceva deja scris - de exemplu, aici). Succes, explorați această proprietate.