Տվեք կայքի վրացական հետաքրքրությունը ֆոնային գրաֆիկայի հետ
Պատկերները գրավիչ կայքի դիզայնի կարեւոր մասն են: Սա ներառում է ֆոնային պատկերների օգտագործումը: Սրանք պատկերները եւ գրաֆիկաներն են, որոնք օգտագործվում են էջի շրջաններում, ի տարբերություն պատկերների, որոնք ներկայացվում են բովանդակության էջերի մաս: Այս ֆոնային պատկերները կարող են ավելացնել տեսողական հետաքրքրություն էջի վրա եւ օգնել ձեզ հասնել տեսողական դիզայնին, որը կարող եք փնտրել էջում:
Եթե դուք սկսում եք ֆոնային պատկերներով աշխատել, ապա անպայման կսկաք գործել սցենարի մեջ, որտեղ ցանկանում եք, որ պատկերի տարածումը տեղադրի էջը:
Սա հատկապես ճիշտ է այնպիսի պատասխանատու կայքերի համար, որոնք մատչելի են սարքերի լայն շրջանակի եւ էկրանին :
Ցանկացած ցանկություն ձգելու ֆոնին պատկեր է, որը շատ տարածված ցանկություն է վեբ դիզայներների համար, քանի որ ոչ բոլոր պատկերները տեղակայված են կայքում: Ֆիքսված չափի տեղադրելու փոխարեն, պատկերի երկարությունը թույլ է տալիս ֆիքսել համապատասխան էջը, անկախ նրանից, թե որքան լայն կամ նեղ է զննարկիչի պատուհանը :
Էջի ֆոնին տեղադրելու համար պատկերի ձգելու լավագույն տարբերակն է CSS3- ի գույքը օգտագործել ֆոնային չափի համար: Ահա մի օրինակ, որն օգտագործում է էջի մարմնի ֆոնային պատկերը եւ որը սահմանում է չափը 100%, որպեսզի այն միշտ ձգվի էկրանին տեղադրելու համար:
մարմին {
background: url (bgimage.jpg) ոչ-կրկնել;
ֆոնային չափը `100%;
}
Caniuse.com- ի տվյալներով, այս գույքը գործում է IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ եւ բոլոր խոշոր բջջային բրաուզերում: Սա ներառում է այսօր առկա բոլոր ժամանակակից բրաուզերների համար, ինչը նշանակում է, որ դուք պետք է օգտագործեք այս հատկությունը առանց վախի, որ այն չի աշխատի որեւէ մեկի էկրանին:
Ավելի հին բրաուզերներում պառկած ֆոնին
Շատ հավանական է, որ դուք պետք է օժանդակեք IE9- ից ավելի բրաուզերներին, բայց եկեք ենթադրենք, որ դուք մտահոգված եք, որ IE8- ը չի աջակցում այս հատկությանը: Այդ դեպքում կարող եք կեղծել երկարատեւ ֆոն: Եվ դուք կարող եք օգտագործել Firefox 3.6 (-moz-background-size) եւ Opera 10.0 (-o-background-size) զննարկիչի նախածանցերը :
Ձգվող ֆոնային ձեւի կեղծիքի ամենահեշտ ձեւն այն ամբողջ էջի վրա ձգում է: Ապա դուք չեք ավարտվում լրացուցիչ տարածք կամ պետք է անհանգստանաք, որ ձեր տեքստը համապատասխանում է ձգվող տարածքում: Ահա թե ինչպես դա անել:
id = "bg" />
- Նախ, համոզվեք, որ բոլոր բրաուզերները ունեն 100% բարձրություն, 0 ծավալի եւ 0 բարձիկ `HTML BODY տարրերի վրա: Տեղադրեք հետեւյալը ձեր HTML փաստաթղթի ղեկավարում.
- Ավելացրեք այն պատկերը, որը ցանկանում եք լինել ֆոն, որպես վեբ էջի առաջին տարրը եւ տալ «bg» - ի id :
- Տեղադրեք ֆոնային պատկերը այնպես, որ այն ամրագրվի վերեւում եւ ձախ կողմում, 100% լայնությամբ եւ 100% բարձրության վրա: Ավելացնել այս ոճաթերթին:
img # bg {
պաշտոնը `ֆիքսված;
վերեւ: 0;
ձախ `0;
լայնությունը `100%;
բարձրությունը `100%;
} - Ավելացրեք ձեր բոլոր բովանդակությունը DIV տարրի ներսում էջում, «բովանդակության» ID- ն: Ավելացնել պատկերից ներքեւ գտնվող DIV- ը:
Նշում. Հետաքրքիր է դիտել ձեր էջը հիմա: Պատկերը պետք է ցուցադրվի, բայց ձեր բովանդակությունը լիովին բացակայում է: Ինչու: Քանի որ ֆոնային պատկերը 100% բարձրության վրա է, եւ բովանդակության բաժանումը փաստաթղթի հոսքի պատկերից հետո շատ բրաուզերներ չեն ցուցադրի այն:Ձեր բոլոր բովանդակությունը այստեղ, ներառյալ վերնագրերը, պարբերությունները եւ այլն:
- Տեղադրեք ձեր բովանդակությունը, որպեսզի այն հարաբերական լինի եւ ունի z-index 1: Սա կբերի այն ֆոնային պատկերից ստանդարտ համապատասխանող բրաուզերներում: Ավելացնել այս ոճաթերթին:
#content {
պաշտոնը `հարաբերական;
z-index: 1;
}
- Բայց դուք չեք արել. Internet Explorer 6- ը համապատասխանում է չափանիշներին եւ դեռեւս որոշ խնդիրներ ունի: CSS- ն թաքցնելու բազմաթիվ եղանակներ կան բոլոր զննարկիչներից, սակայն IE6- ը, բայց ամենադյուրին (եւ, ամենայն հավանականությամբ, այլ խնդիրներ առաջացնելու), պայմանական մեկնաբանություններ օգտագործելու համար: Ստացեք հետեւյալ փաստաթղթերը, ձեր ոճաթերթից հետո ձեր փաստաթղթի ղեկավարում:
- Ներկառուցված մեկնաբանության մեջ ավելացնել ոճի ոճը, ոմանք ոմանք, որպեսզի IE 6- ը լավ խաղա:
- Համոզվեք, որ IE 7 եւ IE 8-ում նույնպես փորձարկվում է: Կարող է գուցե անհրաժեշտ լինի մեկնաբանել մեկնաբանությունները, նրանց աջակցելու համար: Այնուամենայնիվ, այն աշխատում էր, երբ փորձեցի դա:
OK - սա խոստովանելի է WAY overkill- ը: Շատ քիչ կայքեր պետք է աջակցեն IE 7 կամ 8-ը, ավելի քիչ IE6!
Որպես այդպիսին, այս մոտեցումը հնացած է եւ, հավանաբար, ավելորդ է ձեզ համար: Ես թողնում եմ այստեղ ավելի շատ որպես հետաքրքրասիրության մոդել, թե որքան ավելի դժվար բաներ էին մեր բոլոր բրաուզերների առաջ այնքան գեղեցիկ միասին:
Faking մի ձգվող ֆոնի պատկեր ավելի փոքր տարածության մեջ
Դուք կարող եք օգտագործել նմանատիպ տեխնիկան, ձեր կախվածության մեջ գտնվող ֆոնային պատկերը կեղծելու համար: Սա մի փոքր trickier, քանի որ դուք պետք է օգտագործել կամ բացարձակ դիրքավորումը կամ ձեր տարիքի այլ մասերի տարօրինակ spacing խնդիրներ ունենալու համար:
- Տեղադրեք պատկերն այն էջում, որը ցանկանում եմ օգտագործել որպես ֆոն:
- Ձեւի թերթիկում պատկերի համար սահմանեք լայնություն եւ բարձրություն: Նշեք, դուք կարող եք օգտագործել տոկոսների լայնությունը կամ բարձրությունը, բայց ես գտնում եմ, որ ավելի հեշտ է հարմարվել երկարության արժեքների հետ:
img # bg {
լայնությունը `20em;
բարձրությունը `30em;
} - Տեղադրել ձեր բովանդակությունը div- ի հետ «բովանդակության» հետ, ինչպես վարվել ենք վերեւում:
Ձեր բոլոր բովանդակությունը այստեղ
- Ստեղծեք բովանդակությունը div որպես նույն լայնությունը եւ բարձրությունը որպես ֆոնային պատկեր:
div # content {
լայնությունը `20em;
բարձրությունը `30em;
} - Այնուհետեւ տեղադրեք բովանդակությունը նույն բարձրության վրա, ինչպես պատկերով: Այնպես որ, եթե ձեր պատկերը 30 է, դուք կունենաք վերեւի ոճը: -30em; Մի մոռացեք 1-ի z-ինդեքսը բովանդակության վրա:
#content {
պաշտոնը `հարաբերական;
վերեւում `-30em;
z-index: 1;
լայնությունը `20em;
բարձրությունը `30em;
} - Այնուհետեւ IE 6 օգտվողների համար ավելացրեք -1-ի z-ինդեքսը, ինչպես վարվեցիք վերը:
Կրկին զարմանալիորեն օգտվելով լայն բրաուզերի օժանդակությունից, այս մոտեցումը նույնպես շատ անհավանական է եւ ներկայացված է որպես անցյալի դարաշրջանի արդյունք: Եթե ցանկանում եք օգտագործել այս մոտեցումը, պարզապես համոզվեք, որ այն փորձարկեք այնքան, որքան հնարավոր է բրաուզերներում:
Եվ եթե ձեր բովանդակությունը փոխում է չափը, ապա ձեզ հարկավոր է փոխել ձեր կոնտեյների չափը եւ ֆոնային պատկերը, հակառակ դեպքում, դուք կտեսնեք տարօրինակ արդյունքների: