Cum de a seta fundal pentru site-ul (fundalul proprietate css)

Deci, folosind proprietatea de fundal, puteți seta culoarea, poziția, imaginea, Fotografiază și repetabilitatea ca fundal pentru o singură celulă, cât și pentru întregul site. Acesta din urmă, de fapt, este de a defini setările pentru corpul etichetei. Luați în considerare toate proprietățile asociate cu fundal (background). Dacă sunteți doar de învățare, atunci cea mai bună opțiune ar fi o lecție de stăpânirea proprietăților practice de aplicare în același mod ca să examinez mai jos:







culoare de fundal - setează culoarea de fundal. Poate fi aplicat la elemente individuale

,

sau la întregul site prin intermediul etichetei :

background-image - este utilizat pentru a insera o imagine de fundal, în acest caz, în css indică o legătură într-o fotografie:

Observați modul în care calea către imaginea - acest lucru înseamnă că trebuie să fie în același folder ca și stiluri de fișier css. În caz contrar, ar trebui să specificați calea corectă a imaginii.

fundal dimensiuni - definește dimensiunea imaginii de fundal.

Dacă specificați valoarea capacului, fundalul va fi scalate, astfel încât lățimea și înălțimea imaginii = lățimea și înălțimea blocului. Dacă utilizați conține o valoare, scalarea va fi păstrând proporțiile imaginii pentru a se potrivi complet în bloc.

fundal repetare - utilizată în exemplul anterior, imaginea va fi „replicat“ (repetat) pe ecran. Această caracteristică este conceput pentru a gestiona acest proces. Există un număr de valori valide:







  • background-repeat: repeta-x - imagine este repetată numai pe orizontală
  • background-repeat: repeat-y - imaginea va fi repetată numai pe verticală
  • background-repeat: repeta - imaginea se repetă atât pe orizontală cât și pe verticală
  • background-repeat: nu-repeta - imaginea nu se repetă

background-attachment - această proprietate specifică dacă imaginea de fundal este fix atunci când derulați pagina:

  • background-attachment: derulați - derulați cu pagina
  • background-attachment: fix - atunci când defilare de fundal rămâne staționară

background-position - definește locația imaginii de pe ecran, în mod implicit este afișat în colțul din stânga sus. Această valoare de proprietate este un set de coordonate X (orizontală) și Y (verticală) care nachinayutsya din colțul din stânga sus. Poate fi setat:

  • în unități fixe (pixeli, centimetri)
  • în procente
  • verbal: - top (sus), de jos (de jos), centru (centru), la stânga (stânga) și dreapta (dreapta).
  • background-position: 20px 50px - imagine se retrage până la 20 de pixeli de mai sus și spre dreapta cu 50 de la marginea din stânga.
  • background-position: 50% 25% - este centrat pe orizontală și trepte de 25% din partea de sus.
  • background-position: dreapta jos - desen situat în partea dreaptă jos.

Toate aceste setări pot fi stocate într-o proprietate de fundal. ordinea proprietăților:

[Culoare de fundal] | [Background-image] | [Background-repeat] | [Background-attachment] | [Background poziția]

fundal: # 000 URL-ul ( "mi-image.jpg") nu-repeta partea din stânga jos fix;

În cazul în care este trecut orice proprietate, setarea implicită este.

Sper ca acest tutorial este util să vă, abonați la blog actualizări prin RSS, atunci vă așteptați o mulțime de secrete interesante!

Ca și postul? Aboneaza-te la blog actualizări prin RSS. E-mail sau Twitter.