Muab koj lub vev xaib pom muag nrog cov duab tom qab
Dluab yog ib feem tseem ceeb ntawm lub website tsim kom zoo nkauj. Qhov no suav nrog kev siv cov duab tom qab. Cov no yog cov duab thiab cov duab uas siv tom qab ntawm cov nplooj ntawv uas tsis yog los ntawm cov duab uas tau muab los ua ib feem ntawm cov nplooj ntawv. Cov duab tom qab no tuaj yeem muab qhov muag pom rau ib nplooj ntawv thiab pab koj ua tiav qhov kev tsim duab uas koj yuav tau saib rau ntawm nplooj ntawv.
Yog tias koj pib ua hauj lwm nrog cov duab tom qab, koj yuav tseeg ua qhov scenario uas koj xav tau tus duab kom ncav kom haum rau sab.
Qhov no yog qhov tseeb tshwj xeeb tshaj plaws rau cov tsev kawm ntawv teb uas raug xa mus rau ntau hom khoom siv thiab ntsuas ntau ntau .
Qhov kev ntshaw no kom ncab ib cov duab tom qab yog qhov muaj siab tshaj plaws rau cov neeg tsim qauv web site vim tias tsis yog txhua daim duab fits nyob rau hauv qhov chaw ntawm lub website. Siv qhov chaw loj me me, ncab cov duab tso cai rau nws kom haum rau cov nplooj ntawv tsis muaj teeb meem loj npaum li cas los yog nqaim qhov rais qhib qhov rais .
Qhov zoo tshaj plaws kom ncab ib cov duab kom haum rau tom qab ntawm nplooj ntawv yog siv cov cuab yeej CSS3 , rau yav tom ntej. Ntawm no yog ib qho piv txwv uas siv cov duab tom qab rau lub cev ntawm nplooj ntawv thiab uas teev qhov luaj li cas rau 100% es nws thiaj li ncab kom haum qhov screen.
lub cev {
background: url (bgimage.jpg) tsis-rov tso;
tom qab-qhov loj: 100%;
}
Raws li caniuse.com, cov cuab yeej ua haujlwm hauv IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, thiab nyob rau txhua qhov loj mobile browsers. Qhov no npog koj rau tag nrho cov niaj hnub browsers muaj hnub no, uas txhais tau tias koj yuav tsum tau siv cov khoom no tsis ntshai tias nws yuav tsis ua hauj lwm ntawm ib tus neeg qhov screen.
Faking a Background on Browsers Laus
Nws yog tsis zoo li hais tias koj yuav tsum tau txhawb cov browsers laus dua IE9, tab sis peb xav tias koj txhawj xeeb tias IE8 tsis txhawb cov cuab yeej no. Nyob rau hauv qhov ua ntu zus, koj tuaj yeem fake tom qab ncab. Thiab koj tuaj yeem siv qhov browser ua ntej rau Firefox 3.6 (-moz-background-size) thiab Opera 10.0 (-o-background-loj).
Qhov yoojyim txoj kev uas yuav tsim ib daim duab thav duab tom qab yog kom ncab thoob cov nplooj ntawv tag nrho. Tom qab ntawd koj tsis xaus nrog qhov chaw ntxiv lossis muaj kev txhawj xeeb tias koj phau ntawv fits nyob rau hauv lub cheeb tsam stretched. Ntawm no yog yuav ua li cas:
id = "bg" />
- Ua ntej, nco ntsoov tias tag nrho cov browsers muaj ib 100% qhov siab, 0 margins, thiab 0 padding rau lub thiab HTML lub ntsiab ntawm lub ntsiab. Muab cov nram qab no nyob rau hauv lub taub hau ntawm koj daim HTML:
- Ntxiv cov duab uas koj xav ua tus keeb kwm yav dhau los yog thawj lub vev xaib ntawm nplooj ntawv web thiab muab nws tus ID ntawm "bg":
- Nrov cov duab tom qab kom nws tas rau saum toj thiab sab laug thiab yog 100% dav thiab 100% ntawm qhov siab. Ntxiv qhov no rau koj cov ntawv sau:
img # bg {
txoj haujlwm: tsau;
saum toj: 0;
sab laug: 0;
dav: 100%;
qhov siab: 100%;
} - Ntxiv tag nrho koj cov ntsiab lus rau sab hauv ntawm lub caij DIV nrog tus id ntawm "cov ntsiab lus". Ntxiv DIV hauv qab daim duab:
Ceebtoom: nws yog qhov zoo rau saib ntawm koj qhov nplooj ntawv tam sim no. Daim duab yuav tsum nthuav tawm ncab tawm, tab sis koj cov ntsiab lus yog tag nrho uas ploj lawm. Vim li cas? Vim tias cov duab tom qab yog 100% hauv qhov siab, thiab cov ntsiab lus faib yog tom qab cov duab nyob rau hauv cov ndlwg ntawm cov ntawv - feem ntau cov neeg saib xyuas yuav tsis tso nws.Tag nrho koj cov ntsiab lus ntawm no - nrog rau cov headers, paragraphs, thiab lwm yam.
- Muab koj cov ntsiab lus xwv kom nws yog ib tus txheeb ze thiab muaj z-Performance index 1. Qhov no yuav coj nws saum cov duab tom qab hauv cov kev txheeb xyuas cov qauv kawm ntawv. Ntxiv qhov no rau koj cov ntawv sau:
#content {
txoj haujlwm: tus txheeb ze;
z-index: 1;
}
- Tab sis koj tsis tau ua. Internet Explorer 6 tsis yog raws cov qauv thiab tseem muaj qee cov teeb meem. Muaj ntau txoj hau kev nkaum hauv CSS los ntawm txhua qhov browser, tiam sis IE6, tab sis qhov yooj yim (thiab tsawg kawg yuav ua rau lwm cov teeb meem) yog siv cov lus sib tham. Muab cov nram qab no tom qab koj tus qauv ntaub ntawv rau hauv koj lub taub hau:
- Hauv cov lus tseem ceeb, ntxiv lwm daim ntawv nrog rau ib co yeeb yam kom tau IE 6 ua si zoo:
- Nco ntsoov sim hauv IE 7 thiab IE 8 thiab. Koj yuav tsum kho cov lus los txhawb lawv thiab. Txawm li ntawd los, nws ua haujlwm thaum kuv sim nws.
Teb zoo! Lus hauv no teb OK - qhov no yog qes qes overlill. Tsawg ob qhov chaw yuav tsum tau yug IE 7 los sis 8 ntxiv lawm, IE6 tsawg dua!
Xws li, txoj kev no yog qhov qub thiab yuav tsis tsim nyog rau koj. Kuv tawm hauv nws ntxiv no ua ib tug qauv xav paub ntau npaum li cas ntau yam ua ntej txhua yam peb browsers ua si nicely ua ke!
Faking a Background Image Nyob Ntawm Ib Qhov Chaw Rau Me
Koj tuaj yeem siv cov txheej txheem zoo sib xws los ua tus duab thaij duab dhau los ntawm DIV lossis lwm lub hauv koj qhov web page. Qhov no yog qhov kev txiav txim siab me ntsis raws li koj tau siv qhov tseeb tso los sis muaj teeb meem sib txawv rau lwm qhov ntawm koj nplooj ntawv.
- Muab cov duab rau ntawm nplooj ntawv uas kuv xav siv raws li keeb kwm yav dhau los.
- Nyob rau hauv daim ntawv phaj, teem ib lub dav thiab qhov siab rau daim duab. Nco ntsoov, koj tuaj yeem siv qhov feem pua rau qhov dav lossis qhov siab, tab sis kuv pom nws yooj yim los kho qhov ntev qhov tseem ceeb rau qhov siab.
img # bg {
dav: 20em;
qhov siab: 30em;
} - Muab koj cov ntsiab lus nyob rau hauv ib tug div nrog tus id "cov ntsiab lus" raws li peb tau ua saum no:
Tag nrho koj cov ntsiab lus ntawm no
- Style cov ntsiab lus div yuav tsum muaj qhov dav thiab qhov siab ua cov duab tom qab:
div # ntsiab lus {
dav: 20em;
qhov siab: 30em;
} - Tom qab ntawd tso cov ntsiab lus mus txog qhov siab tib yam li daim duab. Thiaj li yog tias koj tus duab 30em koj yuav muaj ib cov style saum: -30 leej; Tsis txhob hnov qab tso z-index ntawm 1 ntawm cov ntsiab lus.
#content {
txoj haujlwm: tus txheeb ze;
saum toj: -30 leej;
z-index: 1;
dav: 20em;
qhov siab: 30em;
} - Tom qab ntawd ntxiv hauv z-Performance index-rau IE 6 cov neeg, raws li koj tau ua saum no:
Ntxiv dua thiab, nrog rau keeb kwm yav dhau los txaus siab rau kev pabcuam broad browser nws tam sim no, qhov kev qhia no tseem yuav tsis ruaj thiab qhia raws li ib yam khoom dhau los. Yog tias koj tsis xav siv qhov kev qhia no, cia li nco ntsoov kuaj qhov no hauv ntau cov browsers li koj tuaj yeem.
Thiab yog hais tias koj cov ntsiab lus pauv loj, koj yuav tau hloov qhov luaj li cas ntawm koj lub thawv thiab cov duab tom qab, txwv tsis pub, koj yuav xaus nrog cov kev sib tw coj txawv txawv.