Dilynwch y dechneg gyda CSS
Os ydych chi'n dylunio gwefan, efallai y bydd gennych ddiddordeb mewn dysgu sut i greu delwedd gefndir sefydlog neu ddyfrnod ar dudalen we. Mae hwn yn driniaeth ddylunio gyffredin sydd wedi bod yn boblogaidd ar-lein ers peth amser. Mae'n effaith ddefnyddiol ei chael yn eich bag o driciau dylunio gwe.
Os nad ydych wedi gwneud hyn o'r blaen neu wedi ceisio hynny yn flaenorol heb lwc, efallai y bydd y broses yn ymddangos yn ofidus, ond nid yw'n anodd iawn o gwbl. Gyda'r tiwtorial byr hwn, cewch y wybodaeth sydd ei hangen arnoch i feistroli'r dechneg mewn ychydig funudau gan ddefnyddio CSS.
Dechrau arni
Mae gan ddelweddau cefndir neu ddyfrnodau (sydd mewn gwirionedd yn unig delweddau cefndir golau iawn) hanes mewn dyluniad argraffedig. Mae'r dogfennau wedi cynnwys long watermarks ar eu cyfer er mwyn eu hatal rhag cael eu copïo. Yn ogystal, mae llawer o daflenni a llyfrynnau yn defnyddio delweddau cefndir mawr fel rhan o'r dyluniad ar gyfer y darn printiedig. Mae dyluniad gwe wedi arddulliau benthyg hir o brint a delweddau cefndir yn un o'r arddulliau benthyca hyn.
Mae'r delweddau cefndir mawr hyn yn hawdd eu creu gan ddefnyddio'r tair eiddo arddull CSS canlynol:
- cefndir-ddelwedd
- cefndir-ailadrodd
- atodiad cefndir
- maint cefndir
Delwedd Cefndir
Byddwch yn defnyddio delwedd cefndir i ddiffinio'r ddelwedd a ddefnyddir fel eich dyfrnod. Mae'r arddull hon yn defnyddio llwybr ffeil yn unig i lwytho delwedd sydd gennych ar eich gwefan, yn debygol mewn cyfeiriadur o'r enw "delweddau".
cefndir-ddelwedd: url (/images/page-background.jpg);
Mae'n bwysig bod y ddelwedd ei hun yn ysgafnach neu'n fwy tryloyw na delwedd arferol. Bydd hyn yn creu edrychiad "watermark" lle mae delwedd lled-dryloyw y tu ôl i'r testun, graffeg a phrif elfennau eraill y dudalen we. Heb y cam hwn, bydd y ddelwedd gefndir yn cystadlu â'r wybodaeth ar eich tudalen a'i gwneud yn anodd ei ddarllen.
Gallwch chi addasu'r ddelwedd gefndir mewn unrhyw raglen golygu fel Adobe Photoshop.
Cefndir-Ailadrodd
Daw'r eiddo cefndir-ailadrodd nesaf. Os ydych chi am i'ch delwedd fod yn graffig arddwrn mawr, byddech chi'n defnyddio'r eiddo hwn i wneud y ddelwedd honno'n arddangos unwaith yn unig.
cefndir-ailadrodd: dim-ailadrodd;
Heb yr eiddo "dim-ailadrodd", y rhagosodiad yw y bydd y ddelwedd yn ailadrodd drosodd a throsodd ar y dudalen. Mae hyn yn annymunol yn y rhan fwyaf o ddyluniadau ar y we modern, felly dylid ystyried yr arddull hon yn hanfodol yn eich CSS.
Cefndir-Atodiad
Mae atodiad cefndir yn eiddo y mae llawer o ddylunwyr gwe yn anghofio amdano. Mae ei ddefnyddio yn cadw'ch delwedd gefndir wedi'i sefydlu yn eich lle pan fyddwch chi'n defnyddio'r eiddo "sefydlog". Dyna sy'n troi'r ddelwedd honno i mewn i ddyfrnod sydd wedi'i osod ar y dudalen.
Y gwerth diofyn ar gyfer yr eiddo hwn yw "scroll." Os nad ydych yn pennu gwerth atodiad cefndir, bydd y cefndir yn sgrolio ynghyd â gweddill y dudalen.
atodiad cefndir: sefydlog;
Maint Cefndir
Mae maint cefndir yn eiddo CSS newydd. Mae'n eich galluogi i osod maint cefndir yn seiliedig ar y portdolio y mae'n cael ei ystyried ynddo. Mae hyn yn ddefnyddiol iawn ar gyfer gwefannau ymatebol a fydd yn arddangos ar wahanol feintiau ar wahanol ddyfeisiadau .
maint cefndir: clawr;
Mae dau werth defnyddiol y gallwch chi ei ddefnyddio ar gyfer yr eiddo hwn yn cynnwys:
- Gorchudd - Yn graddio'r cefndir, felly dangosir y lled llawn neu'r uchder llawn. Golyga hyn na fydd rhai rhannau o'r ddelwedd yn ymddangos ar y sgrîn ond y bydd yr ardal gyfan yn cael ei gwmpasu.
- Cynnwys - Rhannwch y ddelwedd fel bod y lled a'r uchder cyfan yn cael eu dangos yn yr ardal yn cael ei styled. Nid yw'r ddelwedd yn cael ei dorri i ffwrdd, ond yr anfantais yw na fydd rhannau o'r ardal yn cael eu cwmpasu gan y ddelwedd.
Ychwanegu'r CSS i'ch Tudalen
Ar ôl i chi ddeall yr eiddo uchod a'u gwerthoedd, gallwch chi ychwanegu'r arddulliau hyn i'ch gwefan.
Ychwanegwch y canlynol i BENNAETH eich tudalen we os ydych chi'n gwneud gwefan sengl. Ychwanegwch ef at arddulliau CSS dalen arddull allanol os ydych chi'n adeiladu safle aml-dudalen ac eisiau manteisio ar bŵer taflen allanol.
corff {
cefndir-ddelwedd: url (/images/page-background.jpg);
cefndir-ailadrodd: dim-ailadrodd;
atodiad cefndir: sefydlog;
maint cefndir: clawr;
}
// ->
Newid URL eich delwedd gefndir i gyd-fynd â'r enw ffeil penodol a'r llwybr ffeiliau sy'n berthnasol i'ch safle. Gwnewch unrhyw newidiadau priodol eraill i gyd-fynd â'ch dyluniad hefyd a bydd gennych ddyfrnod.
Gallwch Chi Ddynodi Safle, Rhy
Os ydych chi eisiau gosod y dyfrnod mewn lleoliad penodol ar eich tudalen we, gallwch chi wneud hynny hefyd. Er enghraifft, efallai y byddwch am i'r dyfrnod yng nghanol y dudalen neu efallai yn y gornel is, yn hytrach na'r gornel uchaf, sef y rhagosodedig.
I wneud hyn, ychwanegwch yr eiddo safle cefndir i'ch arddull. Bydd hyn yn gosod y ddelwedd yn yr union fan yr hoffech iddo ymddangos. Gallwch ddefnyddio gwerthoedd, canrannau neu aliniadau picsel er mwyn cyflawni'r effaith sefyllfa honno.
lleoliad cefndir: canolfan;