Բովանդակություն

• Քայլել
• 4-ի մեթոդը 1. Ֆոնային ամուր գույնի տեղադրում
• 4-ի մեթոդ 2. Նկարի օգտագործումը որպես ֆոն
• 4-ի մեթոդ 3. Ստեղծել գրադիենտ ֆոն
• 4-ի մեթոդը 4. Որպես պաստառ դրեք գունավոր անիմացիա

HTML- ով ինտերնետային էջի ֆոնը ֆիքսելու համար պարզապես անհրաժեշտ է փոքր փոփոխություն կատարել «մարմնի» տարրի մեջ ոճ> / ոճ> պիտակները: Քայլերը կախված են նրանից, թե ինչպես եք ցանկանում տեսնել ձեր պաստառները: Իմացեք, թե ինչպես տեղադրել ձեր կայքի ֆոնը որպես ամուր գույն, պատկեր, գրադիենտ կամ գունավոր անիմացիա:

Քայլել

4-ի մեթոդը 1. Ֆոնային ամուր գույնի տեղադրում

1. Բացեք ձեր HTML ֆայլը ձեր նախընտրած տեքստի խմբագրում: HTML5- ի դրությամբ, HTML հատկանիշը bgcolor> այլևս չի աջակցվում: Ֆոնի գույնը, ինչպես ձեր էջի մյուս բոլոր ոճային կողմերը, պետք է դրված լինեն CSS- ի հետ:
2. Ավելացնել ոճ> / ոճ> նշում է ձեր փաստաթուղթը: Ձեր էջի բոլոր ոճային տվյալները (ներառյալ ֆոնի գույնը) պետք է կոդավորված լինեն այս պիտակների մեջ: Դուք ունեք ոճ>> պիտակներն արդեն նշված են, ապա կարող եք պարզապես ոլորվել դեպի ֆայլի այդ մասը:

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. Մուտքագրեք «մարմնի» տարրը ներսի մեջ ոճ> / ոճ> պիտակները: Այն ամենը, ինչ դուք փոխում եք «մարմնի» տարր CSS- ում, կանդրադառնա ամբողջ էջի վրա:

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. «Մարմնի» տարրին ավելացրեք «ֆոնային գույն» հատկությունը: Այս համատեքստում կգործի «գույնի» միայն մեկ ուղղագրություն (ոչ թե ՝ գույն):

   ! DOCTYPE html> html> head> style> body {background-color:} / style> / head> body> / body> / html>

5. Տեղադրեք ցանկալի ֆոնի գույնը «ֆոն-գույնի» ետեւում: Այժմ կարող եք նշել գույնի անվանումը (կանաչ, Կապույտ, խմբև այլն), օգտագործել տասնվեցական (վեցանկյուն) ծածկագրեր (օրինակ. #000000 սևի համար, # ff0000 կարմիրի համար և այլն) կամ գույնի համար մուտքագրելով RGB արժեք (օրինակ ՝ rgb (255,255,0) դեղինի համար): Ստորև բերված է hexadeximal ծածկագրերով մի օրինակ, որը ֆոնը դարձնում է նույնը, ինչ wikiHow պաստառը.

   ! DOCTYPE html> html> գլուխ> ոճ> մարմին {background-color: # 93B874; } / ոճ> / գլուխ> մարմին> / մարմին> / html>

   • Սպիտակ: # FFFFFFF
   • Բաց վարդագույն: # FFCCE6
   • Այրված Sienna: #993300
   • Indigo - # 4B0082
   • Մանուշակ - # EE82EE
   • Ստուգեք w3schools.com HTML Գույնը ընտրողին ՝ գտնելու ցանկացած գույնի վեցանկյուն կոդեր:
6. Օգտագործեք «ֆոնային գույն» `ֆոնի գույները այլ տարրերի վրա կիրառելու համար: Likeիշտ այնպես, ինչպես ձեր մարմնի տարրն եք դնում, դուք կարող եք օգտագործել ֆոնի գույնը `այլ տարրերի ֆոնները սահմանելու համար: Պարզապես տեղադրեք այդ տարրերը ներսում ոճ> / ոճ> ֆոնի գույնի հատկությամբ:

   ! DOCTYPE html> html> գլուխ> ոճ> մարմին {background-color: # 93B874; } h1 {background-color: նարնջագույն; } p {background-color: rgb (255,0,0); } / style> / head> body> h1> Այս վերնագիրն ստանում է նարնջագույն ֆոն / h1> p> Այս պարբերությունը ստանում է կարմիր ֆոն / p> / body> / html>

4-ի մեթոդ 2. Նկարի օգտագործումը որպես ֆոն

1. Բացեք HTML ֆայլը տեքստի խմբագրում: Շատերն իրենց կայքի համար նախընտրում են օգտագործել պատկեր որպես ֆոն: Դրանով դուք կարող եք որպես նախապատմություն դնել նախշը, հյուսվածքը, լուսանկարը կամ ցանկացած այլ պատկեր: HTML5-ից բոլոր ֆոնները պետք է տեղադրվեն CSS (Կասկադի ոճի թերթերով) մեջ ոճ> / ոճ> պիտակները:
2. Ավելացնել ոճ> / ոճ> ձեր HTML ֆայլի պիտակները: Ձեր էջի բոլոր ոճային տվյալները (ներառյալ ֆոնի գույնը) պետք է նշված լինեն այս պիտակների մեջ: Արդեն ունեք ոճ>> պիտակները դրված են, ոլորեք ֆայլի այդ մասը:

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. Մուտքագրեք «մարմնի» տարրը ներսի մեջ ոճ> / ոճ> պիտակները: Այն ամենը, ինչ դուք փոխում եք «մարմնի» տարր CSS- ում, կանդրադառնա ամբողջ էջի վրա:

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. «Մարմնի» տարրին ավելացրեք «ֆոն-պատկեր» հատկությունը: Այս հատկությունն ավելացնելիս ձեզ հարկավոր է ձեր պատկերի ֆայլի անունը: Համոզվեք, որ պատկերը պահված է նույն թղթապանակում, ինչ html ֆայլը (կամ լրացրեք ձեր վեբ սերվերի ֆայլի ամբողջական ուղին):

   ! DOCTYPE html> html> head> style> body {background-image: url ("imagename.png"); ֆոնային գույն ՝ # 93B874; } / ոճ> / գլուխ> մարմին> / մարմին> / html>

   • Լավ գաղափար է ներառել ծածկագիրը Ֆոնի գույնը միայն այն դեպքում, երբ ֆոնային պատկերը չի բեռնվում:
5. Շերտը բազմաթիվ պատկերներ: Կարող եք բազմաթիվ պատկերներ շարել միմյանց վրա: Սա կարող է օգտակար լինել, եթե դուք ունեք թափանցիկ ֆոններով պատկերներ, որոնք միմյանց լրացնում են, երբ դրանք տեղադրվում են:

   ! DOCTYPE html> html> head> style> body {background-image: url ("image1.png"), url ("image2.gif"); ֆոնային գույն ՝ # 93B874; } / ոճ> / գլուխ> մարմին> / մարմին> / html>

   • Առաջին պատկերը վերևում է: Երկրորդ պատկերը առաջինից ցածր է:

4-ի մեթոդ 3. Ստեղծել գրադիենտ ֆոն

1. Գրադիենտ ֆոն ստեղծելու համար օգտագործեք CSS: Եթե ​​ինչ-որ բան ավելի շատ ոճավորված եք փնտրում, քան ամուր գույնը, բայց ոչ այնքան զբաղված, որքան գունավոր անիմացիան, փորձեք գրադիենտ ֆոն: Գրադիենտները գույներ են, որոնք փոխվում են այլ հավասարությունների: Ձեր գրադիենը ստեղծելու և կարգավորելու համար կարող եք օգտագործել CSS: Նախքան գունային գրադիենտ ստեղծելը սկսելը, դուք պետք է բավարար գիտելիքներ ստանաք CSS- ով ինտերնետային էջ ձևաչափելու հիմունքների վերաբերյալ:
2. Հասկացեք ստանդարտ շարահյուսությունը: Գրադիենտ ստեղծելիս ձեզ հարկավոր է երկու տեղեկատվություն ՝ ելակետ և մեկնարկային անկյուն, և գույներ, որոնց միջեւ անցում կկատարվի: Կարող եք ընտրել բազմաթիվ գույներ, որոնք բոլորը համընկնում են, և գրադիենը կարող եք ուղղություն կամ անկյուն նշել:

   ֆոն `գծային-գրադիենտ (ուղղություն / անկյուն, գույն 1, գույն 2, գույն 3 և այլն);

3. Ստեղծեք ուղղահայաց գրադիենտ: Եթե ​​ուղղություն չնշեք, գույնը կգործի վերևից ներքև: Տարբեր զննարկիչներ ունեն գրադիենտ գործառույթի տարբեր տարբերակներ, այնպես որ ձեզ հարկավոր է ավելացնել ծածկագրի տարբեր տարբերակներ:

   ! DOCTYPE html> html> head> style> html {min-height: 100%; / * Սա պահանջվում է ապահովելու համար, որ գրադիենը տարածվի ամբողջ էջի վրա * * /} մարմնի {background: -webkit-linear-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / ֆոն ՝ -o- գծային-գրադիենտ (# 93B874, # C9DCB9); / * Opera 11.1+ * / ֆոն `-moz- գծային-գրադիենտ (# 93B874, # C9DCB9); / * Firefox 3.6+ * / ֆոն ՝ գծային-գրադիենտ (# 93B874, # C9DCB9); / * Լռելյայն շարահյուսություն (պետք է լինի վերջին) * / background-color: # 93B874; / * Լավ գաղափար է նախապատմության գույնը դնել, եթե գրադիենտը չի բեռնում * /} / style> / head> body> / body> / html>

4. Ստեղծեք ուղղություն ունեցող գրադիենտ: Գրադիենտին ուղղություն ավելացնելը թույլ է տալիս հարմարեցնել գույնի տեղաշարժի եղանակը: Նշենք, որ տարբեր զննարկիչներ այլ կերպ են մեկնաբանում ուղղությունները: Նրանք բոլորը ցույց կտան նույն գույնի գրադիենտը:

   ! DOCTYPE html> html> head> style> html {min-height: 100%; } body {background: -webkit-linear-gradient (ձախ, # 93B874, # C9DCB9); / * ձախից աջ * / ֆոն ՝ -o- գծային-գրադիենտ (աջ, # 93B874, # C9DCB9); / * վերջ աջ կողմում * / ֆոն ՝ -moz- գծային-գրադիենտ (աջ, # 93B874, # C9DCB9); / * վերջ աջ կողմում * * / ֆոն `գծային-գրադիենտ (աջից, # 93B874, # C9DCB9); / * տեղափոխվում է աջ կողմը * / background-color: # 93B874; / * լավ գաղափար է ֆոնի գույնը սահմանել, եթե գրադիենտը չի բեռնվի * /} / ոճ> / գլուխ> մարմին> / մարմին> / HTML>

5. Գրադիենտը կարգավորելու համար օգտագործեք այլ հատկություններ: Գրադիենտներով դուք կարող եք շատ ավելին անել:
   • Օրինակ, դուք կարող եք ոչ միայն օգտագործել ավելի քան երկու գույներ, այլ նաև տոկոսներ տեղադրել յուրաքանչյուրի ետևում: Դրանով դուք կարող եք նշել, թե որքան տեղ կստանա յուրաքանչյուր գունային հատված:

     ֆոն ՝ գծային գրադիենտ (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • Ավելացրեք թափանցիկություն գույներին: Դրանով դուք կարող եք գունաթափել գույները: Օգտագործեք նույն գույնը `գույնից ոչնչին չեզոքանալու համար: Դուք կսիրեք գործառույթը rgba () պետք է օգտագործել գույնը նշելու համար: Վերջնական արժեքը որոշում է թափանցիկության աստիճանը. 0 անթափանց և 1 թափանցիկ համար

     ֆոն `գծային գրադիենտ (աջից, rgba (147,184,116.0), rgba (147,184,116.1));

4-ի մեթոդը 4. Որպես պաստառ դրեք գունավոր անիմացիա

1. Նավարկել դեպի ոճ>> ձեր HTML կոդում: Եթե ​​գտնում եք ամուր ֆոնի գույն, բայց ոչ, փորձեք փոխել գունային ֆոնները: HTML 5-ից ֆոնի գույները պետք է սահմանվեն CSS (Կասկադ ոճի թերթերով): Եթե ​​CSS- ով երբեք ֆոնի գույն չեք դրել, նախքան այս մեթոդը փորձեք, կարդացեք կոշտ ֆոնի գույնը սահմանելու բաժինը:
2. Ավելացրեք գույքը անիմացիա դեպի «մարմին» տարրը: Դուք ստիպված կլինեք ավելացնել 2 տարբեր հատկություններ, քանի որ յուրաքանչյուր զննարկիչ պահանջում է տարբեր ծածկագիր:

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60-ականների անսահման; անիմացիա. 60-ականների գույնի փոփոխություն անսահման; } / ոճ> / գլուխ> մարմին> / մարմին> / html>

   • -webkit- անիմացիա հատկությունը պահանջվում է Chrome- ի վրա հիմնված զննարկիչների համար (Chrome, Opera, Safari): անիմացիա ստանդարտ է բոլոր մյուս զննարկիչների համար:
   • գույնի փոփոխություն այս օրինակում այն ​​է, ինչ կոչվում է անիմացիա:
   • 60-ականներ անիմացիայի / անցման տևողությունն է (60 վայրկյան): Համոզվեք, որ սա սահմանված է ինչպես վեբ փաթեթի, այնպես էլ լռելյայն շարահյուսության համար:
   • անսահման նշում է, որ անիմացիան պետք է անորոշ ժամանակով կրկնվի: Եթե ​​նախընտրում եք փաթաթել գույները և ապա կանգ առնել վերջին գույնի վրա, կարող եք բաց թողնել այս մասը:
3. Գույներ ավելացրեք ձեր անիմացիային: Այժմ դուք կօգտագործեք @keyframes կանոնը ՝ ֆոնի գույները տեղադրելու համար սահմանելու համար, ինչպես նաև, թե որքան ժամանակ է յուրաքանչյուր գույնը երեւում էջում: Կրկին, դուք ստիպված կլինեք ավելացնել բազմաթիվ կոդավորումներ տարբեր զննարկիչների համար:

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60-ականների անսահման; անիմացիա. 60-ականների գույնի փոփոխություն անսահման; } @ -webkit-keyframes colorchange {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} @keyframes գույնի փոփոխություն {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} / ոճ> / գլուխ> մարմին> / մարմին> / HTML>

   • Նշենք, որ երկու տողերը (@ -webkit-keyframes և @keyframes ունեն նույն արժեքները ֆոնի գույների և տոկոսների համար: Այն պետք է մնա միատարր, որպեսզի փորձը նույնը մնա բոլոր զննարկիչների համար:
   • Տոկոսները (0%, 25%և այլն) ներկայացնում են անիմացիայի ընդհանուր տևողությունը (60-ականներ) Երբ էջը բեռնվում է, ֆոնի վրա գույնը դրված է լինելու 0% և (# 33FFF3) Երբ անիմացիայի 25% -ը կամ 60 վայրկյանը խաղա, ֆոնը կանցնի # 78281Fև այլն:
   • Տևողությունը և գույները կարող եք հարմարեցնել ըստ ցանկության: