Rhowch ddiddordeb gweledol i'ch gwefan gyda graffeg cefndirol
Mae delweddau'n rhan bwysig o ddyluniadau gwefannau deniadol. Mae hyn yn cynnwys defnyddio delweddau cefndirol. Dyma'r delweddau a'r graffeg sy'n cael eu defnyddio y tu ôl i rannau o dudalen yn hytrach na delweddau a gyflwynir fel rhan o'r tudalennau cynnwys. Gall y delweddau cefndir hyn ychwanegu diddordeb gweledol i dudalen a'ch helpu i gyflawni'r dyluniad gweledol y gallech fod yn chwilio amdano ar dudalen.
Os byddwch chi'n dechrau gweithio gyda delweddau cefndir, byddwch yn sicr yn mynd i mewn i'r senario lle rydych am i ddelwedd ei ymestyn i ffitio'r dudalen.
Mae hyn yn arbennig o wir am wefannau ymatebol sy'n cael eu cyflwyno i ystod eang o ddyfeisiau a maint sgrin .
Mae'r awydd hwn i ymestyn delwedd gefndir yn awydd cyffredin iawn i ddylunwyr gwe oherwydd nid yw pob delwedd yn cyd-fynd â gofod gwefan. Yn hytrach na gosod maint sefydlog, mae ymestyn y ddelwedd yn caniatáu iddi ffitio i ffitio'r dudalen waeth pa mor eang neu gul yw ffenestr y porwr .
Y ffordd orau o ymestyn delwedd i gyd-fynd â chefndir tudalen yw defnyddio eiddo CSS3 , ar gyfer maint cefndir. Dyma enghraifft sy'n defnyddio delwedd gefndir ar gyfer corff tudalen ac sy'n gosod y maint i 100% fel y bydd bob amser yn ymestyn i ffitio ar y sgrin.
corff {
cefndir: url (bgimage.jpg) dim-ailadrodd;
maint cefndir: 100%;
}
Yn ôl caniuse.com, mae'r eiddo hwn yn gweithio yn IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, ac ar yr holl borwyr symudol mawr. Mae hyn yn eich cwmpasu ar gyfer yr holl borwyr modern sydd ar gael heddiw, sy'n golygu y dylech ddefnyddio'r eiddo hwn heb ofni na fydd yn gweithio ar sgrin rhywun.
Gwneud Cefndir Wedi'i Lledaenu mewn Porwyr Hŷn
Mae'n annhebygol iawn y byddai angen i chi gefnogi unrhyw borwyr yn hŷn na IE9, ond tybiwn eich bod yn pryderu nad yw IE8 yn cefnogi'r eiddo hwn. Yn yr achos hwnnw, gallwch chi ffugio cefndir estynedig. A gallwch ddefnyddio rhagddodiad y porwr ar gyfer Firefox 3.6 (-moz-background-size) ac Opera 10.0 (-o-cefndir-maint).
Y ffordd hawsaf i ffugio delwedd gefndir estynedig yw ei ymestyn ar draws y dudalen gyfan. Yna, does dim lle i chi gyda lle ychwanegol neu rhaid i chi boeni bod eich testun yn cyd-fynd yn yr ardal estynedig. Dyma sut i wneud hynny:
id = "bg" />
- Yn gyntaf, gwnewch yn siŵr bod pob porwr yn cynnwys uchder o 100%, 0 ymylon, a 0 padl ar yr elfennau HTML a CHYFFORDDI. Rhowch y canlynol ym mhennaeth eich dogfen HTML:
- Ychwanegwch y ddelwedd rydych chi am fod yn gefndir fel elfen gyntaf y dudalen we, a rhowch iddi "bg":
- Gosodwch y ddelwedd gefndir fel ei fod wedi'i osod ar y brig a'r chwith ac mae'n 100% o led a 100% o uchder. Ychwanegwch hyn i'ch dalen arddull:
img # bg {
sefyllfa: sefydlog;
top: 0;
chwith: 0;
lled: 100%;
uchder: 100%;
} - Ychwanegwch eich holl gynnwys i'r dudalen y tu mewn i elfen DIV gydag id o "gynnwys". Ychwanegu'r DIV isod y ddelwedd:
Sylwer: mae'n ddiddorol edrych ar eich tudalen nawr. Dylai'r ddelwedd arddangos yn estynedig, ond mae eich cynnwys yn gwbl ar goll. Pam? Gan fod y ddelwedd gefndir yn 100% o uchder, ac mae'r rhaniad cynnwys ar ôl y ddelwedd yn llif y ddogfen - ni fydd y rhan fwyaf o borwyr yn ei arddangos.Eich holl gynnwys yma - gan gynnwys penawdau, paragraffau, ac ati.
- Gosodwch eich cynnwys fel ei fod yn gymharol ac mae ganddi fynegai z o 1. Bydd hyn yn dod ag ef uwchben y ddelwedd gefndir mewn porwyr sy'n cydymffurfio â safonau. Ychwanegwch hyn i'ch dalen arddull:
#entent {
swydd: perthynas;
z-mynegai: 1;
}
- Ond nid ydych chi wedi'i wneud. Nid yw Internet Explorer 6 yn cydymffurfio â safonau ac mae ganddo rai problemau o hyd. Mae yna lawer o ffyrdd i guddio'r CSS o bob porwr ond IE6, ond y hawsaf (a lleiaf tebygol o achosi problemau eraill) yw defnyddio sylwadau amodol. Rhowch y canlynol ar ôl eich dalen arddull ym mhen eich dogfen:
- Y tu mewn i'r sylw a amlygwyd, ychwanegu taflen arddull arall gyda rhai arddulliau i gael IE 6 i chwarae'n braf:
- Byddwch yn siŵr i brofi yn IE 7 ac IE 8 hefyd. Efallai y bydd angen i chi addasu'r sylwadau i'w cefnogi hefyd. Fodd bynnag, roedd yn gweithio pan fyddwn yn profi hynny.
Iawn - mae hyn yn gyfaddef yn ormodol WAY. Ychydig iawn o safleoedd sydd angen eu cefnogi IE 7 neu 8 anymore, llawer llai IE6!
O'r herwydd, mae'r dull hwn yn hynafol ac yn debygol o ddiangen i chi. Rwy'n ei adael yma yn fwy fel model o chwilfrydedd o ran faint o bethau mwy anodd cyn i'r holl borwyr chwarae mor dda gyda'n gilydd!
Gwneud Delwedd Cefndir Wedi'i Lled Dros Gofod Llai
Gallwch ddefnyddio techneg debyg i ffugio delwedd gefndir estynedig ar draws DIV neu elfen arall ar eich tudalen we. Mae hyn ychydig yn fwy anoddach gan fod yn rhaid i chi naill ai ddefnyddio gosodiad absoliwt neu fod gennych broblemau rhyngweithio rhyfedd ar gyfer rhannau eraill o'ch tudalen.
- Rhowch y ddelwedd ar y dudalen yr hoffwn ei ddefnyddio fel cefndir.
- Yn y dalen arddull, gosodwch lled ac uchder ar gyfer y ddelwedd. Sylwer, gallwch ddefnyddio canrannau ar gyfer lled neu uchder, ond mae'n ei gwneud hi'n haws ei addasu gyda gwerthoedd hyd ar gyfer yr uchder.
img # bg {
lled: 20em;
uchder: 30m;
} - Rhowch eich cynnwys mewn div gyda'r "cynnwys" id fel a wnaethom uchod:
Eich holl gynnwys yma
- Arddullwch y div cynnwys i fod yr un lled ac uchder â'r ddelwedd gefndirol:
div # cynnwys {
lled: 20em;
uchder: 30m;
} - Yna gosodwch y cynnwys hyd at yr un uchder â'r ddelwedd. Felly, os yw eich delwedd yn 30em, byddai gennych arddull o'r brig: -30em; Peidiwch ag anghofio rhoi mynegai z o 1 ar y cynnwys.
#entent {
swydd: perthynas;
top: -30em;
z-mynegai: 1;
lled: 20em;
uchder: 30m;
} - Yna ychwanegwch z-mynegai o -1 ar gyfer defnyddwyr IE 6, fel y gwnaethoch uchod:
Unwaith eto, gyda maint cefndirol yn mwynhau'r gefnogaeth porwr eang, mae hyn hefyd yn debygol iawn o ddiangen ac fe'i cyflwynir fel cynhyrchiad o gyfnod a fu heibio. Os oeddech chi eisiau defnyddio'r dull hwn, sicrhewch eich bod yn profi hyn mewn cymaint o borwyr ag y gallwch.
Ac os yw'ch cynnwys yn newid maint, bydd angen i chi newid maint eich cynhwysydd a'ch delwedd cefndir, fel arall, byddwch yn dod i ben gyda chanlyniadau rhyfedd.