Dyma sut i ychwanegu delweddau dylunio ymatebol gan ddefnyddio CSS
Edrychwch ar wefannau poblogaidd heddiw ac mae un driniaeth ddylunio yr ydych yn siŵr ei weld yn ddelweddau cefndir mawr, sy'n cwmpasu'r sgrin. Mae un o'r heriau wrth ychwanegu'r delweddau hyn yn dod o'r arfer gorau y mae'n rhaid i wefannau ymateb i wahanol feintiau a dyfeisiau sgrin - dull a elwir yn ddylunio gwe-ymatebol .
Gan fod gosodiad eich gwefan yn newid a graddfeydd gyda gwahanol faint o sgrin, felly rhaid i'r delweddau cefndir hyn raddio eu maint yn unol â hynny.
Mewn gwirionedd, mae'r "delweddau hylif" hyn yn un o'r darnau allweddol o wefannau ymatebol (ynghyd â grid hylif ac ymholiadau'r cyfryngau). Mae'r dri darn hwnnw wedi bod yn staple o ddylunio gwe ymatebol ers y dechrau, ond er ei bod bob amser wedi bod yn weddol hawdd ychwanegu delweddau mewnol ymatebol i safle (delweddau mewn llinell yw'r graffeg sydd wedi'u codio fel rhan o'r marc HTML), gan wneud y yr un fath â delweddau cefndir (sydd wedi'u styled i'r dudalen gan ddefnyddio eiddo cefndir CSS) wedi rhoi her sylweddol i lawer o ddylunwyr gwe a datblygwyr diwedd blaen. Diolch yn fawr, mae ychwanegu "eiddo cefndir" yn CSS wedi gwneud hyn yn bosibl.
Mewn erthygl ar wahân, cwmpasais sut i ddefnyddio maint cefndir eiddo CSS3 i ymestyn delweddau i ffitio mewn ffenestr, ond mae yna ffordd hyd yn oed yn well, mwy defnyddiol i'w ddefnyddio ar gyfer yr eiddo hwn. I wneud hyn, byddwn yn defnyddio'r cyfuniad eiddo a gwerth canlynol:
maint cefndir: clawr;
Mae'r eiddo keyword clawr yn dweud wrth y porwr i raddio'r ddelwedd i gyd-fynd â'r ffenestr, waeth pa mor fawr neu fach y mae'r ffenestr yn ei gael. Mae'r ddelwedd wedi'i raddio i gwmpasu'r sgrin gyfan, ond cedwir y gymhareb cyfrannau a'r agwedd wreiddiol yn gyfan, gan atal y ddelwedd ei hun rhag cael ei ystumio.
Rhoddir y ddelwedd yn y ffenestr mor fawr â phosibl fel bod gorchudd cyfan y ffenestr wedi'i gorchuddio. Mae hyn yn golygu na fydd gennych unrhyw lefydd gwag yn eich tudalen nac unrhyw ystumiad ar y ddelwedd, ond mae hefyd yn golygu y gellir trimio peth o'r ddelwedd yn dibynnu ar gymhareb agwedd y sgrîn a'r ddelwedd dan sylw. Er enghraifft, gall ymylon delwedd (naill ai'r brig, y gwaelod, y chwith, neu'r dde) gael eu torri ar y delweddau, yn dibynnu ar ba werthoedd rydych chi'n eu defnyddio ar gyfer eiddo'r cefndir. Os ydych chi'n cyfeirio'r cefndir i'r "chwith uchaf", bydd unrhyw ormodedd ar y ddelwedd yn dod oddi ar yr ochr waelod a'r dde. Os ydych chi'n canoli'r ddelwedd gefndir, bydd y gormodedd yn dod oddi ar yr holl ochrau, ond gan fod y gormod hwnnw'n cael ei ledaenu, bydd yr effaith ar unrhyw un ochr yn llai gwasanaethu.
Sut i Defnyddio maint cefndir: gorchuddio;
Wrth greu eich delwedd gefndir, mae'n syniad da creu delwedd sy'n eithaf mawr. Er bod porwyr yn gallu gwneud delwedd yn llai heb effaith amlwg ar ansawdd gweledol, pan fydd porwr yn graddio delwedd i faint yn fwy na'i dimensiynau gwreiddiol, bydd ansawdd gweledol yn cael ei ddirraddio, yn dod yn aneglur a picelyd. Yr anfantais i hyn yw bod eich tudalen yn cymryd taro perfformiad pan fyddwch yn cyflwyno delweddau mawr i bob sgrin.
Pan fyddwch chi'n gwneud hyn, gwnewch yn siŵr eich bod yn paratoi'r delweddau hynny'n gywir ar gyfer cyflymder lawrlwytho a chyflwyno'r we . Yn y pen draw, mae angen i chi ddod o hyd i'r cyfrwng hapus rhwng maint ac ansawdd delwedd ddigon mawr a maint ffeil rhesymol ar gyfer cyflymderau lawrlwytho.
Un o'r ffyrdd cyffredin o ddefnyddio delweddau cefndir graddol yw pan fyddwch am i'r ddelwedd honno fynd i gefndir llawn tudalen, boed y dudalen honno'n eang a'i weld ar gyfrifiadur pen-desg neu'n llawer llai ac yn cael ei anfon at gyflenwad llaw, symudol dyfeisiau.
Llwythwch eich delwedd i'ch gwe-westeiwr a'i ychwanegu at eich CSS fel delwedd gefndirol:
cefndir-ddelwedd: url (tân gwyllt-dros-wdw.jpg);
cefndir-ailadrodd: dim-ailadrodd;
lleoliad cefndir: canolfan ganolfan;
atodiad cefndir: sefydlog;
Ychwanegu CSS rhagosodedig cyntaf y porwr:
-webkit-background-size: cover;
-moz-background-size: clawr;
-o-cefndir-maint: clawr;
Yna ychwanegwch yr eiddo CSS:
maint cefndir: clawr;
Defnyddio Gwahanol Delweddau sy'n Dyfeisiau Amrywiol Addas
Er bod dyluniad ymatebol ar gyfer bwrdd gwaith neu brofiad laptop yn bwysig, mae'r amrywiaeth o ddyfeisiau a all gael mynediad i'r We wedi cynyddu'n sylweddol, ac mae mwy o amrywiaeth o faint sgrin yn dod â hynny.
Fel y crybwyllwyd yn flaenorol, nid yw llwytho delwedd gefndir ymatebol fawr iawn ar ffôn smart, er enghraifft, yn ddyluniad ymwybodol o lled band effeithlon.
Dysgwch sut y gallwch ddefnyddio ymholiadau cyfryngau i weini delweddau a fydd yn briodol i'r dyfeisiau y byddant yn cael eu harddangos, a gwella cydweddedd eich gwefan gyda dyfeisiau symudol ymhellach.
Erthygl wreiddiol gan Jennfier Krynin. Golygwyd gan Jeremy Girard 9/12/17