Efni.

• Að stíga
• Aðferð 1 af 4: Að stilla solid bakgrunnslit
• Aðferð 2 af 4: Nota mynd sem bakgrunn
• Aðferð 3 af 4: Búðu til hallandi bakgrunn
• Aðferð 4 af 4: Stilltu lit fjör sem veggfóður

Til að geta stillt bakgrunn vefsíðu í HTML þarftu bara að gera smá breytingu á „body“ frumefni innan stíll> / stíll> merkimiðar. Skrefin fara eftir því hvernig þú vilt að veggfóður þitt líti út. Lærðu hvernig á að stilla bakgrunn vefsíðunnar þinnar sem heilsteyptan lit, mynd, halla eða lit fjör.

Að stíga

Aðferð 1 af 4: Að stilla solid bakgrunnslit

1. Opnaðu HTML skrána þína í eftirlætis textaritlinum. Frá og með HTML5 er HTML eiginleiki bgcolor> ekki lengur studdur. Bakgrunnsliturinn, eins og allir aðrir stílþættir á síðunni þinni, verður að vera stilltur með CSS.
2. Bæta við stíll> / stíll> merkir skjalið þitt. Öll stílgögn fyrir síðuna þína (þ.m.t. bakgrunnsliturinn) ættu að vera kóðuð innan þessara merkja. Ertu með stíll> merki sem þegar hafa verið gefin upp, þá geturðu bara flett að þeim hluta skráarinnar.

   ! DOCTYPE html> html> höfuð> stíll> / stíll> / höfuð> / html>

3. Sláðu inn "líkama" frumefni inni í stíll> / stíll> merkimiðar. Allt sem þú breytir í „megin“ frumefni í CSS hefur áhrif á alla síðuna.

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

4. Bættu eigninni „bakgrunnslitur“ við frumefnið „meginmál“. Í þessu samhengi mun aðeins ein stafsetning „litar“ virka (ekki: litur).

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

5. Settu viðkomandi bakgrunnslit á bak við „bakgrunnslit“. Þú getur nú gefið upp nafn litar (grænn, blátt, ritstj, osfrv.), notaðu hexadecimal (hex) kóða (td. #000000 fyrir svartan, # ff0000 fyrir rautt osfrv.) eða með því að slá inn RGB gildi fyrir litinn (svo sem rgb (255,255,0) fyrir gulan). Hér að neðan er dæmi með hexadeximal kóða, sem gerir bakgrunninn þann sama og wikiHow borða:

   ! DOCTYPE html> html> höfuð> stíll> meginmál {bakgrunnslitur: # 93B874; } / style> / head> body> / body> / html>

   • Hvítur: #FFFFFF
   • Ljós bleikur: # FFCCE6
   • Brennd Sienna: #993300
   • Indigo - # 4B0082
   • Fjólublátt - # EE82EE
   • Skoðaðu w3schools.com HTML litavalið til að finna sexkóða hvers litar sem þú vilt.
6. Notaðu „bakgrunnslit“ til að nota bakgrunnslit á aðra þætti. Rétt eins og þú stillir meginmálið geturðu notað bakgrunnslit til að stilla bakgrunn annarra þátta. Settu bara þessa þætti innan stíll> / stíll> með bakgrunnslitareiginleikanum.

   ! DOCTYPE html> html> höfuð> stíll> meginmál {bakgrunnslitur: # 93B874; } h1 {bakgrunnslitur: appelsínugulur; } p {bakgrunnslitur: rgb (255,0,0); } / style> / head> body> h1> Þessi haus fær appelsínugulan bakgrunn / h1> p> Þessi málsgrein fær rauðan bakgrunn / p> / body> / html>

Aðferð 2 af 4: Nota mynd sem bakgrunn

1. Opnaðu HTML skrána í textaritli. Margir kjósa að nota mynd sem bakgrunn fyrir vefsíðu sína. Með þessu er hægt að stilla mynstur, áferð, ljósmynd eða aðra mynd sem bakgrunn. Frá HTML5 verða allir bakgrunnir að vera stilltir með CSS (Cascading Style Sheets) innan stíll> / stíll> merkimiðar.
2. Bæta við stíll> / stíll> merkimiða við HTML skrána þína. Öll stílgögn fyrir síðuna þína (þ.m.t. bakgrunnsliturinn) ættu að vera tilgreind innan þessara merkja. Ertu búinn að því stíll> merki sett, flettu að þeim hluta skráarinnar.

   ! DOCTYPE html> html> höfuð> stíll> / stíll> / höfuð> / html>

3. Sláðu inn "líkama" frumefni inni í stíll> / stíll> merkimiðar. Allt sem þú breytir í „megin“ frumefni í CSS hefur áhrif á alla síðuna.

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

4. Bættu eigninni „bakgrunnsmynd“ við „meginmál“ frumefnið. Þegar þessari eign er bætt við þarftu skráarnafn myndarinnar. Gakktu úr skugga um að myndin sé vistuð í sömu möppu og HTML skjalið (eða bættu öllu slóðinni við skrána á vefþjóninn þinn).

   ! DOCTYPE html> html> head> style> body {background-image: url ("imagename.png"); bakgrunnslitur: # 93B874; } / style> / head> body> / body> / html>

   • Það er góð hugmynd að láta kóðann fylgja með bakgrunns litur bara ef bakgrunnsmyndin mun ekki hlaðast.
5. Lagaðu margar myndir. Þú getur staflað mörgum myndum ofan á hvor aðra. Þetta getur verið gagnlegt ef þú ert með myndir með gagnsæjum bakgrunni sem bæta hvort annað upp þegar það er lagt ofan á.

   ! DOCTYPE html> html> head> style> body {background-image: url ("image1.png"), url ("image2.gif"); bakgrunnslitur: # 93B874; } / style> / head> body> / body> / html>

   • Fyrsta myndin er ofan á. Seinni myndin er fyrir neðan þá fyrstu.

Aðferð 3 af 4: Búðu til hallandi bakgrunn

1. Notaðu CSS til að búa til hallandi bakgrunn. Ef þú ert að leita að einhverju aðeins stílíseraðri en heilum lit, en er ekki eins upptekinn og fjör í litum skaltu prófa hallandi bakgrunn. Hækkanir eru litir sem breytast í annan jöfnuð. Þú getur notað CSS til að búa til og aðlaga halla. Áður en þú byrjar að búa til litahlutfall ættirðu að öðlast næga þekkingu á grunnatriðum við að forsníða vefsíðu með CSS.
2. Skilja venjulegu setningafræði. Þegar þú ert að búa til halla eru tvær upplýsingar sem þú þarft: upphafsstað og upphafshorn og litirnir sem umskipti eiga sér stað á milli. Þú getur valið marga liti sem allir skarast og þú getur tilgreint stefnu eða horn fyrir hallann.

   bakgrunnur: línulegur-halli (stefna / horn, litur1, litur2, litur3 osfrv.);

3. Búðu til lóðréttan halla. Ef þú gefur ekki til kynna stefnu, mun liturinn hlaupa frá toppi til botns. Mismunandi vafrar hafa mismunandi útgáfur af hallastiginu, svo þú verður að bæta við mismunandi útgáfum af kóðanum.

   ! DOCTYPE html> html> höfuð> stíll> html {mín-hæð: 100%; / * Þetta er krafist til að tryggja að hallinn spanni alla síðu * /} meginmálsins {bakgrunnur: -webkit-linear-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / bakgrunnur: -o-línulegur-halli (# 93B874, # C9DCB9); / * Opera 11.1+ * / bakgrunnur: -moz-línulegur-halli (# 93B874, # C9DCB9); / * Firefox 3.6+ * / bakgrunnur: línulegur-halli (# 93B874, # C9DCB9); / * Sjálfgefin setningafræði (verður að vera síðast) * / bakgrunnslitur: # 93B874; / * Það er góð hugmynd að stilla bakgrunnslit, ef hallinn hlaðast ekki * /} / style> / head> body> / body> / html>

4. Búðu til halla með stefnu. Að bæta stefnu við hallann gerir þér kleift að stilla hvernig liturinn færist. Athugaðu að mismunandi vafrar túlka leiðbeiningar á annan hátt. Þeir munu allir sýna sama litastigann.

   ! DOCTYPE html> html> höfuð> stíll> html {mín-hæð: 100%; } líkami {bakgrunnur: -webkit-linear-gradient (vinstri, # 93B874, # C9DCB9); / * frá vinstri til hægri * / bakgrunnur: -o-línulegur-halli (hægri, # 93B874, # C9DCB9); / * enda til hægri * / bakgrunnur: -moz-línulegur-halli (hægri, # 93B874, # C9DCB9); / * enda til hægri * / bakgrunnur: línulegur-halli (til hægri, # 93B874, # C9DCB9); / * færist til hægri megin * / bakgrunnslitur: # 93B874; / * það er góð hugmynd að stilla bakgrunnslit, ef hallinn hlaðast ekki * /} / style> / head> body> / body> / html>

5. Notaðu aðra eiginleika til að stilla hallann. Þú getur gert miklu meira með halla.
   • Þú getur til dæmis ekki aðeins notað fleiri en tvo liti, heldur einnig sett prósentu fyrir aftan hvern. Með þessu er hægt að gefa til kynna hversu mikið pláss hver litahluti fær.

     bakgrunnur: línulegur-halli (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • Bættu gagnsæi við litina. Með þessu geturðu dofnað litunum. Notaðu sama lit til að dofna frá litnum í ekki neitt. Þú munt elska aðgerðina rgba () verður að nota til að gefa til kynna litinn. Lokagildið ákvarðar gagnsæi: 0 fyrir ógegnsætt og 1 fyrir gegnsætt.

     bakgrunnur: línulegur halli (til hægri, rgba (147,184,116.0), rgba (147,184,116.1));

Aðferð 4 af 4: Stilltu lit fjör sem veggfóður

1. Sigla til stíll> í HTML kóðanum þínum. Ef þú finnur fyrir traustum bakgrunnslit en ekki, reyndu að breyta litabakgrunni. Frá HTML 5 verður að skilgreina bakgrunnslit með CSS (Cascading Style Sheets). Ef þú hefur aldrei stillt bakgrunnslit með CSS skaltu lesa hlutann um að setja fastan bakgrunnslit áður en þú prófar þessa aðferð.
2. Bæta við eigninni fjör að „líkama“ frumefninu. Þú verður að bæta við 2 mismunandi eiginleikum, þar sem hver vafri krefst mismunandi kóða.

   ! DOCTYPE html> html> höfuð> stíll> meginmál {-webkit-fjör: litabreyting 60s óendanleg; fjör: litaskipti 60s óendanleg; } / style> / head> body> / body> / html>

   • -webkit-fjör eignin er krafist fyrir vafra sem byggja á Chrome (Chrome, Opera, Safari). fjör er staðallinn fyrir alla aðra vafra.
   • litaskipti er það sem kallað er fjör í þessu dæmi.
   • 60s er lengd (60 sekúndur) fjörsins / umbreytingarinnar. Gakktu úr skugga um að stilla þetta bæði fyrir vefpakkann og sjálfgefna setningafræði.
   • óendanlegur gefur til kynna að hreyfimyndin ætti að endurtaka endalaust. Ef þú kýst að lykkja litina og hætta síðan við síðasta litinn geturðu sleppt þessum hluta.
3. Bættu litum við fjörið þitt. Núna ætlar þú að nota @keyframes regluna til að stilla bakgrunnslitina til að fara í gegnum, sem og hversu lengi hver litur sést á síðunni. Aftur verður þú að bæta við mörgum kóðunum fyrir hina ýmsu vafra.

   ! DOCTYPE html> html> höfuð> stíll> meginmál {-webkit-fjör: litabreyting 60s óendanleg; fjör: litaskipti 60s óendanleg; } @ -webkit-keyframes litabreyting {0% {bakgrunnur: # 33FFF3;} 25% {bakgrunnur: # 78281F;} 50% {bakgrunnur: # 117A65;} 75% {bakgrunnur: # DC7633;} 100% {bakgrunnur: # 9B59B6;}} @keyframes litaskipti {0% {bakgrunnur: # 33FFF3;} 25% {bakgrunnur: # 78281F;} 50% {bakgrunnur: # 117A65;} 75% {bakgrunnur: # DC7633;} 100% {bakgrunnur: # 9B59B6;}} / style> / head> body> / body> / html>

   • Athugaðu að tvær línurnar (@ -webkit-keyframes og @keyframes hafa sömu gildi fyrir bakgrunnslit og prósentur. Það ætti að vera einsleitt svo að upplifunin haldist sú sama fyrir alla vafra.
   • Prósenturnar (0%, 25%, osfrv.) tákna heildarlengd hreyfimyndarinnar (60s). Þegar síðan er hlaðin verður liturinn stilltur á bakgrunninn 0% og (# 33FFF3). Þegar 25% eða 60 sekúndur af hreyfimyndinni hefur spilast mun bakgrunnurinn breytast í # 78281F, og svo framvegis.
   • Þú getur stillt tímalengd og liti að vild.