CSS- ի միջոցով զննարկիչի պատուհանի ամբողջ լայնության վրա ֆոնային պատկերը ձգելու հնարավորությունը հայտնվեց միայն նրա վերջին ճշգրտման `CSS3- ի թողարկումով: Unfortunatelyավոք, մինչ այժմ մեծ թվով վեբ սերֆերներ օգտագործում են վաղ զննարկիչներ, որոնք չեն հասկանում CSS3 բնութագիրը: Հետեւաբար, դուք պետք է ընտրություն կատարեք. Կա՛մ օգտագործեք ոչ այնքան հարմար, բայց խաչբրաուզերային լուծում, կա՛մ բարձր տեխնոլոգիաներ, բայց սահմանափակ լսարանի համար: Եկեք քննարկենք երկու տարբերակները:
Անհրաժեշտ է
HTML և CSS հիմնական գիտելիքներ
Հրահանգներ
Քայլ 1
Առաջին տարբերակը հիմնված է CSS լեզվի ավելի վաղ բնութագրերի վրա: Դուք պետք է ստեղծեք HTML կոդի կառուցվածք, որն ունի երկու համընկնող շերտեր, մեկը մյուսից վեր: Շերտերը (div) կարող են ձգվել մինչև էկրանի լայնությունը հին կասկադային ոճի նկարագրության լեզվի բնութագրերում: Շերտերի ներքեւի մասում դուք պետք է տեղադրեք ֆոնի պատկերը, իսկ վերևում տեղադրեք էջի ամբողջ բովանդակությունը: Փաստաթղթի մարմնում նման կառուցվածքը կարող է ունենալ այսպիսի տեսք.
Սա կլինի էջի բովանդակությունը
Եվ այս կառուցվածքի ոճերի նկարագրությունը պետք է տեղադրվի վերնագրի մասում: Օրինակ, սա.
html, մարմին {
լուսանցք ՝ 0px;
բարձրությունը `100%;
}
# հետին պլան {
դիրքը ՝ բացարձակ;
լայնությունը `100%;
բարձրությունը `100%;
}
# մարմին {
դիրքը ՝ բացարձակ;
լայնությունը `100%;
բարձրությունը `100%;
z- ինդեքս: 2;
}
Այստեղ ID- ների ֆոնով շերտերը (սա ձեր ֆոնային պատկերն է) և մարմինը (սա էջի բովանդակության համար նախատեսված շերտն է) դրված են բացարձակ դիրքի և 100% լայնության և բարձրության վրա: Բացի այդ, բովանդակության շերտին հատկացվում է սերիական համար z-index = 2. Այն որոշում է շերտերի «խորությունը». Որքան մեծ է, այնքան ավելի ներքևում է գտնվում այս շերտը «ներքևից»: Մեր դեպքում դա կլինի ֆոնային շերտի վերևում, որն օգտագործում է լռելյայն z- ինդեքսը:
Քայլ 2
Ամբողջական ծածկագիրը կարող է ունենալ այսպիսի տեսք.
html, մարմին {
լուսանցք ՝ 0px;
բարձրությունը `100%;
}
# հետին պլան {
դիրքը ՝ բացարձակ;
լայնությունը `100%;
բարձրությունը `100%;
}
# մարմին {
դիրքը ՝ բացարձակ;
լայնությունը `100%;
բարձրությունը `100%;
z- ինդեքս: 2;
}
Սա կլինի էջի բովանդակությունը
Մի մոռացեք փոխարինել ֆոնային պատկերի ֆայլի անունը fon.png:
Քայլ 3
Երկրորդ տարբերակը կօգտագործի CSS3- ում ներկայացված ֆոնի չափի հատկությունը: Միևնույն ժամանակ, նման հատկություններ ավելացրեք ոճի սահմանումներին, որոնք նախկինում օգտագործվել են Mozilla Firefox, Google Chrome և Opera զննարկիչների կողմից: Այս տարբերակում ոճի նկարագրության բլոկը կարող է նման լինել հետևյալ կերպ.
html {
ֆոն. url (fon.png) առանց կրկնության կենտրոնի կենտրոն ֆիքսված;
-webkit-background-size: կազմ;
-moz-background-size: կազմ;
-o-background-size: կազմ;
ֆոնի չափը ՝ կազմ;
}
Եվ այստեղ մի մոռացեք փոխարինել ֆոնային պատկերի ֆայլի անունը fon.png: Եվ հենց փաստաթղթի մարմնում այս տարբերակում հատուկ կառուցվածքներ չեն պահանջվում:
