Վեբ էջում ֆոնային ջրի մակարդակի նշագիծ ստեղծելու մասին խորհուրդներ

Կատարել տեխնիկան CSS- ով

Եթե ​​դուք նախագծում եք կայք, կարող եք հետաքրքրվել, թե ինչպես ստեղծել ֆիքսված ֆոնային պատկեր կամ ջրի մակարդակի նշագիծ `վեբ էջում: Սա ընդհանուր նախագծային բուժում է, որն արդեն բավականին տարածված է ինտերնետում: Դա օգտակար է ձեր վեբ դիզայնի տոպրակի մեջ:

Եթե ​​դուք նախկինում չեք արել դա կամ փորձել այն առանց նախասիրության, գործընթացը կարող է թվալ ահագնացող, բայց դա իրականում շատ դժվար չէ: Այս կարճ ձեռնարկով դուք կստանաք այն տեղեկատվությունը, որը դուք պետք է տիրապետեք տեխնիկան մի քանի րոպեների ընթացքում, օգտագործելով CSS- ը:

Սկսել

Ֆոնային պատկերները կամ ջրային նիշերը (որոնք իսկապես շատ լուսավոր ֆոնի պատկերներ են) ունեն տպագիր դիզայնի պատմություն: Փաստաթղթերը երկար ժամանակ ջրի տակ նշաններ են դրսեւորել `դրանք կանխելու համար: Բացի այդ, շատ թռուցիկներ եւ բրոշյուրներ մեծ ֆոնի պատկերներ են օգտագործում, որպես տպագիր կտորների նախագծման մաս: Վեբ դիզայնը վաղուց ստացված ոճերը տպագիր եւ ֆոնային պատկերներից են, որոնք ստացվում են այդ վարկածներից:

Այս խոշոր ֆոնային պատկերները հեշտ է ստեղծել հետեւյալ երեք CSS ոճի հատկությունները օգտագործելու միջոցով.

Ֆոնային-պատկեր

Դուք կօգտագործեք ֆոնի-պատկեր, նկարագրելու այն պատկերը, որը կօգտագործվի որպես ձեր ջրի մակարդակի նշագիծ: Այս ոճը պարզապես օգտագործում է ֆայլի ուղին, ձեր կայքի վրա պատկերված պատկերը, հավանաբար «պատկերներ» անվանումով:

background-image: url (/images/page-background.jpg);

Կարեւոր է, որ պատկերը ինքնին ավելի թեթեւ կամ ավելի թափանցիկ է, քան նորմալ պատկերը: Սա կստեղծի «ջրի մակարդակի նշագիծ» նիշ, որի մեջ կիսաթափանցիկ պատկեր է տեքստի, գրաֆիկայի եւ ինտերնետային էջի այլ հիմնական տարրերի ետեւում: Առանց այս քայլի, ֆոնային պատկերը կհամապատասխանի ձեր էջում տեղ գտած տեղեկատվությանը եւ դժվար է կարդալ:

Դուք կարող եք հարմարեցնել ֆոնային պատկերը ցանկացած խմբագրում ծրագրում, ինչպիսիք են Adobe Photoshop- ը:

Նախապատմություն- կրկնել

Ֆոնի վրա կրկնում է հաջորդը: Եթե ​​ցանկանում եք, որ ձեր պատկերը լինի մեծ ջրի մակարդակի նշագիծ ոճով գրաֆիկական, դուք օգտագործում եք այս հատկությունը, որպեսզի այդ պատկերը միայն մեկ անգամ ցուցադրվի:

background-repeat: ոչ-կրկնել;

Առանց «ոչ կրկնելի» գույքը, նախնականը այն է, որ պատկերը կրկնվի կրկին ու կրկին էջում: Սա անցանկալի է ժամանակակից ինտերնետային էջերի նախագծումների ժամանակ, ուստի այս ոճը պետք է կարեւոր լինի ձեր CSS- ում:

Ֆոնային հավելված

Ֆոնային հավելվածը հանդիսանում է այնպիսի գույք, որը շատ վեբ դիզայներներ մոռանում են: Օգտագործելով այն պահպանում է ձեր ֆոնային պատկերը, այն դեպքում, երբ դուք օգտագործում եք «ֆիքսված» գույքը: Դա այնպիսին է, որ այդ պատկերը վերածվում է ջրի մակարդակի նշագծի, որը ամրագրված է էջում:

Այս հատկության համար նախնական արժեքը «ոլորման» է: Եթե ​​դուք չեք նշում ֆոնային հավելվածի արժեքը, ապա ֆոնն անցնում է էջի մյուս էջերի հետ միասին:

ֆոնային հավելված. ֆիքսված;

Ֆոնային-չափը

Ֆոնային չափը նոր CSS հատկություն է: Այն թույլ է տալիս սահմանել տեսքի չափը, որը դիտվում է այն տեսադաշտում, որը դիտվում է: Սա շատ օգտակար է արձագանքող կայքերին , որոնք տարբեր սարքերում տարբեր չափերով կցուցադրվեն:

background-size: ծածկ;

Այս արժեքի համար օգտագործվող երկու օգտակար արժեքներ ներառում են `

CSS- ը ձեր էջում ավելացնելու համար

Երբ հասկանում եք վերը նշված հատկությունները եւ դրանց արժեքները, կարող եք ավելացնել այս ոճերը ձեր կայքում:

Հաջորդը ավելացրեք ձեր վեբ-էջի ղեկավարին, եթե դուք ստեղծում եք մեկ էջանոց կայք: Ավելացրեք այն արտաքին ոճաթերթերի CSS- ի ոճերը, եթե դուք ստեղծում եք բազմաբնույթ էջ եւ ցանկանում եք օգտվել արտաքին թերթիկի հզորությունից: