ֆոնային պատկեր: | ոչ ոք; ֆոնային պատկեր: | ոչ մի | ժառանգել; ֆոնային պատկեր: <фн-изображение> [ , <фн-изображение> ]*; <фн-изображение> = | ոչ ոք

Նկարագրություն

Ֆոնային պատկերի հատկություն(անգլերեն «ֆոնային պատկեր» - «ֆոնային պատկեր») սահմանում է տարրի ֆոնային պատկերը.

Նշում

Ֆոնային պատկեր սահմանելիս պետք է նաև նշել ֆոնի գույնը, որը կօգտագործվի, եթե պատկերը մատչելի չէ: Երբ պատկերը մատչելի է, այն ցուցադրվում է ֆոնի գույնի վրա: (Այս կերպ, գույնը տեսանելի կլինի պատկերի թափանցիկ մասերում):

Օգտվելու կանոններ

Սկսած CSS3- ից (ստորակետներով բաժանված), կարող եք միանգամից նշել բազմաթիվ ֆոնային պատկերներ: Սա ստորին ֆոնի պատկերները տեսանելի կդարձնի վերին ֆոնի պատկերների թափանցիկ տարածքներով:

JavaScript

[object] .style .backgroundImage = "[արժեք]";

Brննարկչի աջակցություն

Տեխնիկական պայմաններ

Արժեքները

Բոլոր արժեքները CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3

Ոչ մեկը ցույց չի տալիս ֆոնային պատկերի բացակայություն: url ( ) Նշում է պատկերի URI տողը «url (...)» ներսում:

ֆոնային պատկեր ՝ url (myImage.png);

Url (" ") Նշում է պատկերի URI տողը" url (...) " - ի սահմաններում, իսկ URI տողը նշվում է" "Կրկնակի մեջբերումով" "նշաններով:

background-image: url ("myImage.png");

Herառանգություն Նշում է, որ տարրը պետք է ժառանգի մայր տարրի պարամետրերը:

Սկզբնական արժեքը."Ոչ ոք".

Օգտագործման օրինակ

Կոդերի ցուցակագրում

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

Փաստաթուղթ `բազմաթիվ ֆոնային պատկերներով:

> Ֆոնային պատկերի հատկություն>

Վեբ կայքի ձևավորումը սկսվում է ֆոնից:

Correctիշտ կլինի սահմանել ֆոնի գույնը `հատկություն Ֆոնի գույնը, անվտանգության ցանցի համար, եթե նկարը չի բեռնվում: Փակագծերում url ()նշեք լուսանկարներով թղթապանակի ուղին:

Լռելյայն, պատկերը կկրկնվի «կղմինդր» -ի պես, մինչև չլրացնի զննարկչի ամբողջ էկրանը, քանի որ մենք շարժվում ենք էջը ներքև, մեր «սալիկ» -ը կլրացնի և՛ երկրորդ էկրանը, և՛ երրորդը, այնքան ժամանակ, քանի դեռ էջի բովանդակությունը կավարտվի: . Հասկանալի է, որ նման արդյունքը դիզայնի գաղափարի բարձրությունը չէ, և մենք չենք ունենա «լոգարան», այլ պարզապես բլոգ, որտեղ ընթերցելիությունը շատ կարևոր կետ է:

«Սալիկապատումից» ազատվելու պարզ տարբերակն այն է, որ օգտագործեք մեծ պատկեր ՝ առնվազն 1024 պիքս լայնությամբ, որպեսզի այն լրացնի ամբողջ էկրանը: Նաև լավ լուծում կլինի անթերի հյուսվածք գտնելը, երբ բազմապատկվի, պատկերը կլինի մեկ ամբողջություն:

Ինչպե՞ս ֆոնն ավելի գրավիչ դարձնել:

Փառք Աստծո, մենք ունենք օգնականներ դրա համար.

• ոչ կրկնել- անջատել կրկնելը
• կրկնել-x- օրինակի կրկնությունը միայն հորիզոնական
• կրկնել- y- օրինակի կրկնությունը միայն ուղղահայաց

Օրինակ:

Բլոգի վերնագիր

Սա ֆոնի հյուսվածք է, որը կրկնում է միայն հորիզոնական:

Հաջորդ օգնականը սեփականությունն է ֆոնային դիրքը, թույլ է տալիս տեղադրել ֆոնային պատկերը էկրանի ցանկացած վայրում: Այս տեխնիկան լայն տարածում ունի ժամանակակից վեբ դիզայնի մեջ: Մենք ունենք նկար, բայց դա բովանդակության մաս չէ, այլ ծառայում է միայն որպես կայքի դեկոր:

Վերնագիր

Տվյալ դիրքով չկրկնվող ֆոնի օրինակ:

Նկարը ցուցադրվում է միայն մեկ անգամ և գտնվում է աջ կողմում:

Աջ եզրից ներդիրը սահմանվում է 200 px ՝ տեքստի ֆոնի հետ բախումից խուսափելու համար:

Եթե ​​ցանկանում ենք, որ էկրանը ոլորելիս նկարը միշտ տեսանելի լինի, մենք պետք է հատկությունը ավելացնենք վերը նշված կոդի վրա. ֆոնային կցորդ ՝ ֆիքսված;

Ո՞րն է տարբերությունը imgեւ ֆոնային պատկեր?

Տարբերությունը հիմնարար է, պիտակ imgտեղադրվում է անմիջապես մարմնի մեջ Html-էջեր և պատասխանատու է բովանդակության համար (նկարազարդումներ, լուսանկարներ, ավատարներ), կրում է իմաստային բեռ: Շատ կարևոր է, որ նկարը ինդեքսավորվի որոնման համակարգերի կողմից և հայտնվի որոնման արդյունքների մեջ: Հատկություններ CSS ֆոնային պատկեր- դարձնել կայքը եզակի և գեղեցիկ, այսինքն ՝ այս դիզայնը, որը պետք է դուրս բերել արտաքին ֆայլ CSSոճեր կամ օգտագործել տարրի ներսում ոճը.

Իհարկե, սա դա չի նշանակում ֆոնային պատկերչի գործի, եթե դրվի մարմնում Html-էջեր: Բայց ես խստորեն խորհուրդ եմ տալիս, որ դիզայնի հետ կապված ամեն ինչ դուրս բերվի CSS... Արդյունքում, մենք մաքրություն կստանանք Html-կոդը:

• սա դրական ազդեցություն կունենա կայքի ինդեքսավորման վրա, որոնման բոտերը կսիրեն ձեր կայքը և ավելի հաճախ կայցելեն այն:
• ձեր այցելուները նույնպես գոհ կլինեն, կայքը ցածր քաշի պատճառով ավելի արագ կբեռնվի:
• Դուք, որպես վեբ վարպետ, ավելի հեշտ եք աշխատում մաքուր կոդով:

Դե, մենք քիչ թե շատ հաշվի ենք առել գույքի օգտագործման բոլոր տարբերակները CSS ֆոնային պատկեր... Ավելի շատ պրակտիկա ընկերներ: Ազատորեն պատճենեք կոդը և ձեր սեփական ընտրանքներով հանդես եկեք:

կարճ տեղեկատվություն

CSS տարբերակները

Արժեքները

url արժեքը գրաֆիկական ֆայլի ուղին է, որը նշված է url () կառուցվածքի ներսում: Այս դեպքում ֆայլի ուղին կարող է գրվել կամ չակերտների մեջ (երկակի կամ մեկական), կամ առանց դրանց: none Չեղարկում է տարրի ֆոնային պատկերը: ժառանգել herառանգում է արժեքը ծնողից:

HTML5 CSS2.1 IE Cr Op Sa Fx

Օբյեկտի մոդել

document.getElementById ("elementID") .style.backgroundImage

Ննարկիչներ

Internet Explorer 7.0 կամ ավելի նոր տարբերակ կիրառվում է ֆոնի վրա ՝ տարրի եզրագծի ներսում, որն ունի իր hasLayout հատկությունը: Եթե ​​տարրը չունի hasLayout, ֆոնային պատկերի հատկությունը կհարգի տարրի սահմանները, ինչպես նշված է բնութագրում: Displayուցադրման տարբերությունը նկատելի կլինի, եթե եզրերն ավելի շատ կոշտ լինեն, քան ճեղքված կամ կետավոր:

Եթե ​​տարրը սահմանվել է ոլորման կամ ավտոմատ ռեժիմի, Internet Explorer 8-ը կունենա մեկ պիքսել ուղղահայաց հետաձգում, երբ ֆոնը ոլորվում է:

Internet Explorer- ը մինչև 7.0 տարբերակը ներառյալ չի ապահովում ժառանգական արժեքը:

Եթե ​​ֆոնը դրված է սեղանի տողի համար (պիտակ ), այնուհետև Chrome- ը, Safari- ն, iOS- ը չեն ցուցադրում այն, ինչպես սահմանված է բնութագրում, այն է ՝ յուրաքանչյուր բջիջի համար առանձին: Մինչդեռ դիտարկիչը պետք է ամուր ֆոն ցույց տա ամբողջ տողի համար: Օրինակ 2 -ը ցույց է տալիս սխալի ցուցադրման կոդը:

HTML5 CSS2.1 IE Cr Op Sa Fx

1

2

3

Այս օրինակի արդյունքը Chrome բրաուզերում ցուցադրված է Նկ. 1. Browser Internet Explorer- ը, Opera- ն և Firefox- ը ճիշտ են ցուցադրում գծի ֆոնը (նկ. 2):

Բրինձ 1. Կրկնել ֆոնը յուրաքանչյուր բջիջի համար

Բրինձ 2. Նախապատմություն ամբողջ գծի համար

կարճ տեղեկատվություն

CSS տարբերակները

Արժեքները

url արժեքը գրաֆիկական ֆայլի ուղին է, որը նշված է url () կառուցվածքի ներսում: Այս դեպքում ֆայլի ուղին կարող է գրվել կամ չակերտների մեջ (երկակի կամ մեկական), կամ առանց դրանց: none Չեղարկում է տարրի ֆոնային պատկերը: ժառանգել herառանգում է արժեքը ծնողից:

HTML5 CSS2.1 IE Cr Op Sa Fx

Օբյեկտի մոդել

document.getElementById ("elementID") .style.backgroundImage

Ննարկիչներ

Internet Explorer 7.0 կամ ավելի նոր տարբերակ կիրառվում է ֆոնի վրա ՝ տարրի եզրագծի ներսում, որն ունի իր hasLayout հատկությունը: Եթե ​​տարրը չունի hasLayout, ֆոնային պատկերի հատկությունը կհարգի տարրի սահմանները, ինչպես նշված է բնութագրում: Displayուցադրման տարբերությունը նկատելի կլինի, եթե եզրերն ավելի շատ կոշտ լինեն, քան ճեղքված կամ կետավոր:

Եթե ​​տարրը սահմանվել է ոլորման կամ ավտոմատ ռեժիմի, Internet Explorer 8-ը կունենա մեկ պիքսել ուղղահայաց հետաձգում, երբ ֆոնը ոլորվում է:

Internet Explorer- ը մինչև 7.0 տարբերակը ներառյալ չի ապահովում ժառանգական արժեքը:

Եթե ​​ֆոնը դրված է սեղանի տողի համար (պիտակ ), այնուհետև Chrome- ը, Safari- ն, iOS- ը չեն ցուցադրում այն, ինչպես սահմանված է բնութագրում, այն է ՝ յուրաքանչյուր բջիջի համար առանձին: Մինչդեռ դիտարկիչը պետք է ամուր ֆոն ցույց տա ամբողջ տողի համար: Օրինակ 2 -ը ցույց է տալիս սխալի ցուցադրման կոդը:

HTML5 CSS2.1 IE Cr Op Sa Fx

1

2

3

Այս օրինակի արդյունքը Chrome բրաուզերում ցուցադրված է Նկ. 1. Browser Internet Explorer- ը, Opera- ն և Firefox- ը ճիշտ են ցուցադրում գծի ֆոնը (նկ. 2):

Բրինձ 1. Կրկնել ֆոնը յուրաքանչյուր բջիջի համար

Բրինձ 2. Նախապատմություն ամբողջ գծի համար

Կարծում եմ, որ չկա մի կայք, որտեղ գույքը չօգտագործվի CSS ֆոն... Թվում է ՝ ի՞նչը կարող է ավելի պարզ լինել, քան այս հատկությունը: Բայց ոչ, դրա հնարավորությունները շատ ավելի լայն են, քան նկարի կամ գույնի սովորական նպատակը ՝ որպես էջի ֆոն: Ինչ -որ բան ծանոթ կլինի, բայց ինչ -որ բան անշուշտ կդառնա նորություն շատերի համար: Ամեն դեպքում, օգտակար կլինի մանրակրկիտ իմանալ, թե ինչպես է գործում ֆոնը:

CSS3- ը շատ նոր բաներ է բերել գույքին, սա թափանցիկություն է և բազմաթիվ պատկերներ ֆոնին հատկացնելը, բայց մենք դրա մասին կխոսենք ստորև, և առաջին հերթին, մենք կանդրադառնանք սեփականության հիմունքներին: ֆոն.

Ֆոնի գույնը

Համոզված եմ, որ դուք մի քանի անգամ կատարել եք ֆոնի գույնի առաջադրանքներ: Դա կարելի է անել նշումների մի քանի տեսակների միջոցով ՝ կանոնավոր (օգտագործվում է գույնի անվանումը), տասնվեցական կամ RGB նշում: Յուրաքանչյուր տեսակ հավասար է, օգտագործեք այն, որը ձեզ ամենալավն է դուր գալիս: Ես փորձում եմ օգտագործել ամենակարճ տարբերակը, և ընկալման համար այն ավելի պարզ է, և ոճի ֆայլը փոքր -ինչ ավելի փոքր է:

P (ֆոնային-գույնը ՝ կարմիր;) p (ֆոնային-գույնը ՝ # f00;) p (ֆոնային-գույնը ՝ # ff0000;) p (ֆոնի գույնը ՝ rgb (255, 0, 0;))

CSS3- ն ունի թափանցիկության աջակցություն, այնպես որ կարող եք այն ավելացնել նաև մեր գույնին, այսպես.

P (ֆոնի գույնը ՝ rgba (255, 0, 0, 0.5);)

Վերջին թվանշանը սահմանվել է 50% թափանցիկության: Թափանցիկության արժեքը կարող եք սահմանել 0 -ից (ամբողջովին թափանցիկ ֆոն) մինչև 1 (ամբողջովին անթափանց):

ֆոնային պատկեր

Այս հատկությունը նույնպես օգտագործվում է շատ հաճախ, այն թույլ է տալիս պատկեր նշանակել ֆոնին: CSS3- ը ավելացնում է ֆոնին բազմաթիվ պատկերներ նշանակելու ունակություն, որոնցից յուրաքանչյուրը ստեղծում է մի տեսակ շերտ, ուստի յուրաքանչյուր հաջորդը տեղադրված է նախորդի վրա: Ինչու՞ սա կարող է օգտակար լինել: Ամեն ինչ բավականին պարզ է. Ենթադրենք, դուք պետք է պտուտակեք փոքրիկ բռնակները կայքի յուրաքանչյուր անկյունում: Քիչ թե շատ հեղուկ դասավորություն ապահովելը, մեկ պատկեր օգտագործելը տարբերակ չէ: Հետեւաբար, մենք կազմում ենք 4 «շերտ», յուրաքանչյուր պատկեր տեղափոխում ենք իր անկյունը եւ վերջ, խնդիրը լուծված է

Մարմին (ֆոնային պատկեր ՝ url ("image1"), url ("image2"), url ("image3"))

Եթե ​​Ձեզ անհրաժեշտ է մեկ պատկեր նշանակել ֆոնին, ապա ծածկագրում թողնում ենք միայն առաջինը, կարծում եմ սա հասկանալի է:
Rulesանկացած պատկեր որպես ֆոն օգտագործելիս պետք է հիշել երկու կանոն.

• սահմանեք հակապատկեր ֆոնի գույն, եթե օգտագործողը ինչ -ինչ պատճառներով չի կարող նկար ցուցադրել: Այն կարող է անջատել մռայլ պատկերների ցուցադրումը, խնայում երթևեկությունը:
• մի օգտագործեք ֆոնային պատկեր ՝ որևէ կարևոր տեղեկատվություն փոխանցելու համար: Վերևում նշված պատճառով օգտագործողը կարող է այն չտեսնել:

Ֆոնային բազմաթիվ պատկերների աջակցությունը բավականաչափ լայն է: Բոլոր դիտարկիչները, նույնիսկ IE8- ը, աջակցում են այս հատկությունը: