Կատարել տեխնիկան CSS- ով
Եթե դուք նախագծում եք կայք, կարող եք հետաքրքրվել, թե ինչպես ստեղծել ֆիքսված ֆոնային պատկեր կամ ջրի մակարդակի նշագիծ `վեբ էջում: Սա ընդհանուր նախագծային բուժում է, որն արդեն բավականին տարածված է ինտերնետում: Դա օգտակար է ձեր վեբ դիզայնի տոպրակի մեջ:
Եթե դուք նախկինում չեք արել դա կամ փորձել այն առանց նախասիրության, գործընթացը կարող է թվալ ահագնացող, բայց դա իրականում շատ դժվար չէ: Այս կարճ ձեռնարկով դուք կստանաք այն տեղեկատվությունը, որը դուք պետք է տիրապետեք տեխնիկան մի քանի րոպեների ընթացքում, օգտագործելով CSS- ը:
Սկսել
Ֆոնային պատկերները կամ ջրային նիշերը (որոնք իսկապես շատ լուսավոր ֆոնի պատկերներ են) ունեն տպագիր դիզայնի պատմություն: Փաստաթղթերը երկար ժամանակ ջրի տակ նշաններ են դրսեւորել `դրանք կանխելու համար: Բացի այդ, շատ թռուցիկներ եւ բրոշյուրներ մեծ ֆոնի պատկերներ են օգտագործում, որպես տպագիր կտորների նախագծման մաս: Վեբ դիզայնը վաղուց ստացված ոճերը տպագիր եւ ֆոնային պատկերներից են, որոնք ստացվում են այդ վարկածներից:
Այս խոշոր ֆոնային պատկերները հեշտ է ստեղծել հետեւյալ երեք CSS ոճի հատկությունները օգտագործելու միջոցով.
- ֆոնային պատկեր
- ֆոնային-կրկնում
- ֆոնային հավելված
- ֆոնային չափը
Ֆոնային-պատկեր
Դուք կօգտագործեք ֆոնի-պատկեր, նկարագրելու այն պատկերը, որը կօգտագործվի որպես ձեր ջրի մակարդակի նշագիծ: Այս ոճը պարզապես օգտագործում է ֆայլի ուղին, ձեր կայքի վրա պատկերված պատկերը, հավանաբար «պատկերներ» անվանումով:
background-image: url (/images/page-background.jpg);
Կարեւոր է, որ պատկերը ինքնին ավելի թեթեւ կամ ավելի թափանցիկ է, քան նորմալ պատկերը: Սա կստեղծի «ջրի մակարդակի նշագիծ» նիշ, որի մեջ կիսաթափանցիկ պատկեր է տեքստի, գրաֆիկայի եւ ինտերնետային էջի այլ հիմնական տարրերի ետեւում: Առանց այս քայլի, ֆոնային պատկերը կհամապատասխանի ձեր էջում տեղ գտած տեղեկատվությանը եւ դժվար է կարդալ:
Դուք կարող եք հարմարեցնել ֆոնային պատկերը ցանկացած խմբագրում ծրագրում, ինչպիսիք են Adobe Photoshop- ը:
Նախապատմություն- կրկնել
Ֆոնի վրա կրկնում է հաջորդը: Եթե ցանկանում եք, որ ձեր պատկերը լինի մեծ ջրի մակարդակի նշագիծ ոճով գրաֆիկական, դուք օգտագործում եք այս հատկությունը, որպեսզի այդ պատկերը միայն մեկ անգամ ցուցադրվի:
background-repeat: ոչ-կրկնել;
Առանց «ոչ կրկնելի» գույքը, նախնականը այն է, որ պատկերը կրկնվի կրկին ու կրկին էջում: Սա անցանկալի է ժամանակակից ինտերնետային էջերի նախագծումների ժամանակ, ուստի այս ոճը պետք է կարեւոր լինի ձեր CSS- ում:
Ֆոնային հավելված
Ֆոնային հավելվածը հանդիսանում է այնպիսի գույք, որը շատ վեբ դիզայներներ մոռանում են: Օգտագործելով այն պահպանում է ձեր ֆոնային պատկերը, այն դեպքում, երբ դուք օգտագործում եք «ֆիքսված» գույքը: Դա այնպիսին է, որ այդ պատկերը վերածվում է ջրի մակարդակի նշագծի, որը ամրագրված է էջում:
Այս հատկության համար նախնական արժեքը «ոլորման» է: Եթե դուք չեք նշում ֆոնային հավելվածի արժեքը, ապա ֆոնն անցնում է էջի մյուս էջերի հետ միասին:
ֆոնային հավելված. ֆիքսված;
Ֆոնային-չափը
Ֆոնային չափը նոր CSS հատկություն է: Այն թույլ է տալիս սահմանել տեսքի չափը, որը դիտվում է այն տեսադաշտում, որը դիտվում է: Սա շատ օգտակար է արձագանքող կայքերին , որոնք տարբեր սարքերում տարբեր չափերով կցուցադրվեն:
background-size: ծածկ;
Այս արժեքի համար օգտագործվող երկու օգտակար արժեքներ ներառում են `
- Cover - Կշռադատում է ֆոնի վրա այնպես, ինչպես ցույց է տրվում ամբողջական լայնությունը կամ լրիվ բարձրությունը: Սա նշանակում է, որ պատկերի որոշ հատվածներ չեն կարող էկրանին հայտնվել, բայց ամբողջ տարածքը կկանգնեցվի:
- Ընդգրկում - Կշռում է պատկերը այնպես, ինչպես լայնությունը եւ բարձրությունը ցուցադրվում են հարդարված տարածքում: Պատկերը կտրված չէ, բայց բացասական կողմն այն է, որ տարածքի մասերը չեն կարող ծածկվել պատկերով:
CSS- ը ձեր էջում ավելացնելու համար
Երբ հասկանում եք վերը նշված հատկությունները եւ դրանց արժեքները, կարող եք ավելացնել այս ոճերը ձեր կայքում:
Հաջորդը ավելացրեք ձեր վեբ-էջի ղեկավարին, եթե դուք ստեղծում եք մեկ էջանոց կայք: Ավելացրեք այն արտաքին ոճաթերթերի CSS- ի ոճերը, եթե դուք ստեղծում եք բազմաբնույթ էջ եւ ցանկանում եք օգտվել արտաքին թերթիկի հզորությունից: