Ահա թե ինչպես պետք է ավելացնել CSS- ով պատկերի դիզայներական պատկերներ
Նայեք հանրային կայքերը այսօր եւ մեկ դիզայնի բուժում, որը դուք համոզված եք տեսնել, մեծ էկրանի ծալվող ֆոնային պատկերներ: Այս տեսանյութերը ավելացնելով մարտահրավերներից մեկը լավագույն փորձից է, որ կայքերը պետք է արձագանքեն տարբեր տեսակի չափսերի եւ սարքերին `մոտեցում, որը հայտնի է որպես պատասխանատու վեբ դիզայն :
Քանի որ ձեր կայքի դասավորությունը փոխվում է եւ չափերը տարբեր էկրանի չափերով, այնպես էլ այդ ֆոնային պատկերները պետք է համապատասխանաբար չափափոխեն իրենց չափերը:
Փաստորեն, այդ «հեղուկ պատկերները» պատասխանատու կայքերի հիմնական հատվածներից մեկն են (հեղուկ ցանցի եւ լրատվամիջոցների հարցումների հետ միասին): Այդ երեք կտորները եղել են պատասխանատու վեբ դիզայնի կաղապար, սկիզբը, սակայն մինչդեռ միշտ եղել է բավականին հեշտ է ավելացնել կայքի պատասխան տող պատկերները (ներկառուցված պատկերները գրաֆիկա են, որոնք կոդավորված են որպես HTML- ի նշագրման մաս) ինչպես նաեւ ֆոնային պատկերներով (որոնք ձեւավորված են էջի մեջ, օգտագործելով CSS- ի ֆոնային հատկությունները) երկար ժամանակ ապահովել է շատ վեբ դիզայներների եւ ճակատային նախնական մշակողների համար: Բարեբախտաբար, հնարավոր է, CSS- ի «ֆոնային չափ» գույքի ավելացումը:
Առանձին հոդվածում ես ընդգրկում էի, թե ինչպես օգտագործել CSS3- ի գույքային ֆոնային չափը `նկարները տարածելու պատուհանում տեղադրելու համար, բայց կա ավելի լավ, ավելի օգտակար տարբերակ, որը տեղակայվելու է այս գույքի համար: Դա անելու համար մենք կօգտագործենք հետեւյալ գույքը եւ արժեքի համադրությունը.
background-size: ծածկ;
Ծածկույթի բանալի բառի գույքը պատմում է զննարկիչին, պատկերի պատշաճ կերպով տարածելու համար, անկախ նրանից, թե որքան մեծ է կամ փոքր պատուհանը: Պատկերը մասշտաբ է, ամբողջ էկրանը լուսաբանելու համար, սակայն բնօրինակը եւ կողմնային հարաբերությունը պահվում են անփոփոխ, խոչընդոտելով պատկերը իրեն խեղաթյուրման:
Պատկերը հնարավորինս մեծ պատուհանում տեղադրվում է այնպես, որ ամբողջ պատուհանի մակերեսը ծածկված է: Սա նշանակում է, որ ձեր էջում որեւէ դատարկ տեղ չեք ունենա կամ ձեր պատկերով աղավաղում եք, բայց դա նաեւ նշանակում է, որ պատկերի որոշ մասը կարող է կտրված լինել, կախված էկրանի եւ առարկայի տեսանկյունից: Օրինակ, պատկերների եզրերը (կամ վերեւի, ներքեւի, ձախի կամ աջի) կարող են կտրվել պատկերների վրա, կախված այն արժեքներից, որոնք դուք օգտագործում եք ֆոնային դիրքի գույքի համար: Եթե դուք կողմնորոշեք ֆոնին «վերեւի ձախ», ապա պատկերի վրա որեւէ ավելցուկ դուրս կգա ներքեւի եւ աջ կողմերից: Եթե դուք կենտրոնանաք ֆոնային պատկերին, ապա ավելցուկը կջնջվի բոլոր կողմերից, բայց քանի որ այդ ավելցուկը տարածվում է, ապա որեւէ ազդեցություն է կրում որեւէ կողմի վրա:
Ինչպես օգտագործել ֆոնային չափը. Ծածկ;
Երբ ձեր ֆոնի պատկերն եք ստեղծում, լավ գաղափար է ստեղծել այն պատկերը, որը բավականին մեծ է: Թեեւ բրաուզերները կարող են պատկերն ավելի փոքր դարձնել, առանց տեսողական որակի ակնհայտ ազդեցություն ունենալով, երբ դիտարկիչը չափսերի չափը ավելի մեծ է, քան իր սկզբնական չափերը, տեսողական որակը կկորցնեն, դառնալով բծախնդրություն եւ pixelated: Դրա անկումը այն է, որ ձեր էջը կատարում է հարված, երբ դուք հսկա պատկերներ եք հաղորդում բոլոր էկրաններին:
Երբ դա անում եք, համոզվեք, որ այդ պատկերները պատշաճ կերպով նախապատրաստեք բեռնման արագության եւ վեբ առաքման համար : Ի վերջո, դուք պետք է գտնեք երջանիկ միջավայրը չափազանց մեծ չափերի եւ չափի միջեւ եւ բեռնել արագությունների համար խելամիտ ֆայլի չափ:
Ընդլայնելով ֆոնային պատկերների օգտագործման ընդհանուր եղանակներից մեկը այն է, երբ դուք ցանկանում եք, որ այդ պատկերը վերցնի էջի ամբողջական ֆոնի վրա, թե արդյոք այդ էջը լայն է եւ դիտվում է համակարգչի համակարգչում կամ շատ ավելի փոքր է եւ ուղարկվում է շարժական, բջջային սարքեր:
Վերբեռնեք ձեր պատկերը ձեր վեբ հոսթին եւ այն ձեր CSS- ին որպես ֆոնի պատկեր:
background-image: url (հրավառություն-over-wdw.jpg);
background-repeat: ոչ-կրկնել;
ֆոնային դիրքորոշում. կենտրոնի կենտրոն;
ֆոնային հավելված. ֆիքսված;
Ավելացրեք զննարկիչը նախընտրած CSS- ի առաջինը.
-վեբիտ-ֆոնային-չափս. ծածկ;
-մոզ-ֆոնային-չափս. ծածկ;
-o-background-size: ծածկ;
Այնուհետեւ ավելացրեք CSS հատկությունը:
background-size: ծածկ;
Օգտագործելով տարբեր պատկերներ, որոնք համապատասխանում են տարբեր սարքերին
Չնայած աշխատասեղանի համար պատասխանատու դիզայնը կամ նոութբուքի փորձը կարեւոր է, այնպիսի սարքերի բազմազանությունը, որ կարող է վեբ մուտք գործել, զգալիորեն աճել է, եւ դրա հետ մեծ էկրանի չափսերը գալիս են:
Ինչպես նախկինում նշվեց, սմարթֆոնի վրա շատ մեծ արձագանքների ֆոնին նկարելը, օրինակ, արդյունավետ չէ կամ թողունակության գիտակցված դիզայն:
Իմացեք, թե ինչպես կարող եք օգտագործել լրատվամիջոցների հարցումները , ծառայելու համար պատկերներ, որոնք համապատասխանում են այն սարքերին, որոնք կցուցադրվեն, եւ հետագայում բարելավելու ձեր կայքի համատեղելիությունը բջջային սարքերի հետ:
Իրական հոդվածը Ջենիֆեր Քրինինն է: Խմբագրված է Ջերեմի Գիրարդ 9/12/17