Kā Ievietot Vietnes Fonu

Satura rādītājs:

Kā Ievietot Vietnes Fonu
Kā Ievietot Vietnes Fonu

Video: Kā Ievietot Vietnes Fonu

Video: Kā Ievietot Vietnes Fonu
Video: Kā mājaslapā ievietot pogas 2024, Maijs
Anonim

Vietnes darba fonu var salīdzināt ar operētājsistēmas darbvirsmas fona attēlu. Fons (fons), jūs varat izveidot vairākās variācijās, kuras tiks aplūkotas turpmāk.

Kā ievietot vietnes fonu
Kā ievietot vietnes fonu

Nepieciešams

Rediģē failu style.css

Instrukcijas

1. solis

Vienkrāsains fons. Vienkāršākais fona veids, liels plus ir minimālā lapas slodze, izmantojot šādu attēlu. Ja stila failā (style.css) nav komandu, kas iestatītu fona krāsu, pārlūks pēc noklusējuma iesaka baltu. Izmantojiet komandu fona krāsa, lai mainītu krāsu. Šīs komandas izmantošanas piemērs: background-color: # 3366CC.

2. solis

Lai izvēlētos noteiktu krāsu, varat izmantot īpašu programmatūru, piemēram, grafikas redaktoru Adobe Photoshop. Ja jūs nekad neesat ar to strādājis, ieteicams izmantot tīmekļa pakalpojumus. Spilgts piemērs ir meklētājprogramma "Yandex", dodieties uz šo saiti https://yandex.ru un ievadiet frāzi "krāsa zila". Jums priekšā parādīsies krāsu tabula, kurā jūs varat izvēlēties jebkuru sev tīkamu, nokopēt kodu un ielīmēt to vietnes kodā.

3. solis

Fona faktūra. Papildus fona krāsai jebkurai savas vietnes lapai varat pievienot attēlu vai cikliski atkārtojošu rakstu (faktūru). Lai to izdarītu, pēc fona krāsas ievadīšanas uzrakstiet komandu background-image, piemēram, background-image: url (img / uzor.png). Iekavās jānorāda ceļš uz failu. Ir vērts atzīmēt, ka faktūras izšķirtspēja var sākties no mazākā (16x16) un beigties ar pilna izmēra attēliem vietnes lapu izmēram (800x600 un vairāk).

4. solis

Fons, izmantojot gradientu. Šajā gadījumā jūs izmantojat fona krāsu, kas tika iestatīta ar komandu background-color, bet izveidojat gradientu. Slīpums var būt horizontāls (x) un vertikāls (y). Visbiežāk kā fona gradients tiek izmantota horizontāla pozīcija, tāpēc līnija ar gradientu izskatīsies šādi: background-repeat: repeat-x.

Ieteicams: