CSS ֆոն թափանցիկությունը: Թափանցիկ ֆոն կամ տեքստային CSS- ի հետ

Հետ գալուստը CSS3 վեբ դիզայներների աշխատել է բազմաթիվ եղանակներով դարձել է ավելի հեշտ եւ ավելի տրամաբանական վերջո, դուք կարող եք այժմ իսկապես ճկունորեն հարմարեցնել ցանկացած օբյեկտ, պակաս հաճախ դիմելու JavaScript. Եկեք ասում են, դուք պետք է հարմարեցնել թափանցիկությունը ֆոնին - CSS անմիջապես առաջարկում է մի շարք տարբերակներ:

Նախապատմություն սահմանված մի շարք հատկանիշների (ֆոնային-պատկերային, Ֆոնային-պաշտոնների , Ֆոնային չափ, Ֆոնային-կրկնում, background-attachment, Ֆոնային ծագման, Ֆոնային-clip, ֆոնային գույնի), որոնցից յուրաքանչյուրը կարող է լինել հանձնարարված առանձին կամ համակցված տակ հատկանիշի ֆոն. Եկեք քննենք նրանցից յուրաքանչյուրը մանրամասն.

Վերագրել ֆոնային գունավոր

CSS- ով, ապա հետին պլանի գույնը կարող է սահմանվել մի քանի եղանակներով: Օգտագործելով hex կոդը, գույնի անունը կամ RGB մուտքի. Ի CSS3 դա հնարավոր է դարձել է օգտագործել փոխարեն RGB-ձայնագրման տարբերակը հետ rgba:

Hex գույն կոդը արձանագրվել է սեփականության հետո վանդակներից: ֆոնային գույնը: # FFDAB9. Եթե կերպարները այս գրանցմանը են նույն զույգ կոդը, սովորաբար, մի քիչ կտրված: # ccff00 կարելի է գրել նաեւ # cf0:

մարմնի {ֆոնային-color: # cf0 ;}.

Անունն է, նույնիսկ առավել էկզոտիկ գույներով. Օրինակ, ի լրումն ստանդարտ կարմիր եւ սպիտակ, դուք կարող եք օգտագործել NavajoWhite (#FFDEAD) կամ Honeydew2 (# E0EEE0):

մարմնի {ֆոնային գույնի `մանուշակագույն, }.

Վերջինս տարբերակն այն է, RGB կամ RGBA մուտքի թույլ է տալիս ձեւակերպել ոչ միայն գույնը, այլեւ թափանցիկությունը CSS ֆոնին, սակայն մեթոդը աշխատում է միայն IE տարբերակների ավելի հին է, քան 9: Այլ բրաուզերների ճանաչել նորմալ տարբերակը թափանցիկ: Ինչպես տեղեկացնում են W3C ստանդարտներին դա նախընտրելի է օգտագործել դեռ rgba փոխարեն ավելի սովորական RGB.

Վերջինը արժեք rgba հետին պլան եւ սահմանում անթափանցիկություն է 0 (թափանցիկ) մինչեւ 1 (անթափանց):

Կան որոշ արտասովոր արժեքներ: The Ֆոնի գույնը կարող է սահմանվել, օգտագործելով HSL եւ HSLA. Երկուսն էլ ավելացվել է CSS3, եւ, հետեւաբար, չեն ապահովվում են IE տարբերակ 9 կամ ավելի բարձր: Մարմնավորումներ նույնական RGB կամ RGBA, միայն այլ ձեւաչափով: աղաղակ (երանգը - արժեքը գունային անիվ, տրվում է աստիճանով), հագեցնել (հագեցվածությունը - գույնը ինտենսիվության որպես տոկոսային, 0-ից 100), անհոգություն (անհոգություն - պայծառությունը, չափվում նմանապես պարամետր համակել ).

Վերագրել ֆոնային պատկեր

Առավել խաչաձեւ բրաուզերը տարբերակը թափանցիկ ֆոն - սա օգտագործումը պատկերով: Ի CSS3, դուք կարող եք սահմանել, նույնիսկ ավելի պատկերներ, դա կատարվում է ստորակետերով: օրինակ.

{Ֆոնային-մարմին պատկերը: URL (bg1.png), url (bg2.png)}:

Այս կերպ աջակցելու նույնիսկ IE8: Մի քանի պատկերները ֆոնի վրա կաուչուկի օգտագործվող դասավորությունը Կարեւոր է, չեն մոռանում օգտագործել ցանկացած պատկեր եւ սահմանել Ֆոնի գույնը CSS, քանի որ օգտվողները կարող են պարզապես վերբեռնել պատկեր.

Վերագրել ֆոնային դիրք

Եթե դուք օգտագործում եք պատկերը սահմանել Ֆոնի միավորը, CSS թույլ է տալիս Ձեզ է տեղը պատկերը ամենուր էկրանի վրա: Ըստ նախնականի, որ պատկերը գտնվում է վերին ձախ անկյունում: Ատրիբուտը տեւում է կամ բանավոր հրահանգներ (վերեւ, ներքեւ, ձախ, աջ), թվային (հետաքրքրություն, փիքսել եւ այլ ստորաբաժանումների): Այս դեպքում, դուք պետք է նշեք երկու արժեքները, հորիզոնական եւ ուղղահայաց:

մարմնի {ֆոն դիրքորոշումը: Աջ կենտրոն ;} - այս օրինակում, օրինակ կլինի գտնվում է աջ կողմում էջի վերեւի եւ ներքեւի մասում պատկերի հեռավորությունը նույնը:

Վերագրել ֆոնային չափ

Երբեմն դա անհրաժեշտ է ձգվել CSS ֆոն կամ նվազեցնել իր չափը. Որպեսզի դա անել, օգտագործել հատկանիշը ֆոնի չափը, եւ չափը ֆոնի կարող է սահմանվել է պիքսել կամ տոկոսներով, եւ ցանկացած այլ ստորաբաժանումներ:

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

Վերագրել background-attachment

Այս հատկանիշը սահմանում է վարքագծի ֆոնային պատկերներ, իսկ շարժվել: Այնպես որ, դա կարող է տեւել 3 արժեքները (ոչ այդ թվում `ժառանգելու, ընդհանուրի համար բոլոր հատկանիշները քննարկվում է սույն հոդվածի):

• ֆիքսված է պատկերն ֆոնի վրա ֆիքսված.
• ոլորել - ֆոնային պտտվում հետ մնացած տարրերի.
• տեղական պատկերն է հետին պլան, որը scrolled եթե գույն ունի բովանդակություն: Նախապատմություն, որ դուրս է գալիս բովանդակության շրջանակից է արձանագրվել:

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

մարմնի {background-attachment ֆիքսված}.

Ներկայում, Firefox չի աջակցում վերջին գույքը (տեղական):

Վերագրել ֆոնային ծագման

Այս հատկանիշը պատասխանատու դիրքավորման տարր. Վաղ բրաուզերների պահանջում օգտագործումը կոդերով: Գույքը ինքն ունի երեք պարամետրերը:

• լիցք-արկղ է դիրքերում հարաբերական է եզրին օրինակին, իսկ հաշվի առնելով հաստությունը շրջանակներում.
• սահմանային box հատկությունները տարբեր է նախորդ է, որ սահմանային գծի կարող է լրիվ կամ մասնակիորեն ծածկել օրինակին.
• բովանդակության արկղ դիրքավորումը պատկերը pryavyazyvaya դրա բովանդակությունը:

Եթե դուք նշեք մի քանի արժեքներ, ապա բրաուզերների կարող է արձագանքել իրենց սեփական ճանապարհով: Firefox եւ Opera ընկալում է միայն առաջին տարբերակը:

Վերագրել ֆոնային-կրկնել

Որպես կանոն, եթե հետին պլանի պատկերը հստակ է, որ դա պետք է կրկնվել հորիզոնական կամ ուղղահայաց. Սրա համար, եւ օգտագործվում է հատկանիշը ֆոնի-կրկնել. Այսպիսով, թաղամաս ֆոնային, CSS, որը պարունակում է այնպիսի գույքը կարող է ունենալ մի քանի պարամետրերի:

• ոչ-կրկնել - կերպարը հայտնվում է էջի մեկ տարբերակով:
• Կրկնում ֆոն կրկնվում է x եւ y.
• Կրկնում x - միայն հորիզոնական.
• Կրկնում y - միայն ուղղահայաց;
• տարածք - ֆոն կրկնվում, բայց եթե տարածք, անհնար է լրացնել միջեւ նկարներում հայտնվում դատարկ
• կլոր - պատկերը մասշտաբը, եթե դա չի լրացնել ամբողջ տարածքը ամբողջ պատկերներով.

Օրինակ, հատկանիշներ:

մարմնի {ֆոն-կրկնել: անմեղսունակության աստվա- կրկնել կրկնել} - նման ֆոնային-կրկնել: Կրկնում y.

Ի CSS3 կարող է նշել արժեքները բազմակի պատկերներ թվարկման ժամանակ, երբ պարամետրերի, բաժանելով դրանք ստորակետերով:

Վերագրել ֆոնային-clip

Այս հատկանիշը սահմանում պահվածքը ֆոնի ներքո սահմաններում (օրինակ, այն դեպքում, կետավոր շրջանակներում):

• լիցք-box - ֆոն դրսեւորվում է ներքին բլոկի,
• սահման-box - պատկերն է գալիս շրջանակներում.
• բովանդակության-box - պատկերն ֆոնի վրա կհայտնվի միայն շրջանակներում բովանդակությամբ.

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

մարմնի {ֆոն-clip: բովանդակությանը արկղ;}.

Chrom եւ Safari պահանջում -webkit- նախածանց.

Անթափանցիկություն ատրիբուտները եւ զտիչ

անթափանցիկություն հատկանիշը թույլ է տալիս Ձեզ սահմանել թափանցիկությունը ֆոնին - CSS գույքը կարող է աշխատել բոլոր բրաուզերների. Որ արժեքը սահմանված է տատանվում 0.0 1.0-ը ներառյալ: Այս դեպքում, դուք կարող եք սահմանել թափանցիկությունը CSS ֆոնին ոչ ամբողջ թիվ փոխարեն 0.3 բավական է գրել .3:

.Block {ֆոնային նկար: URL ( img.png); անթափանցիկություն: .3;}.

Է սահմանել ֆոնի անթափանցիկություն, CSS հարմար նույնիսկ IE գրանշանները իններորդ տարբերակին, օգտագործել ֆիլտր հատկանիշը:

.Block {ֆոնային նկար: URL ( img.png); ֆիլտր: ալֆա (անթափանցիկություն = 30)}:

Այս դեպքում, անթափանցիկություն արժեքը սահմանվել միջեւ 0 եւ 100. Նշենք, որ անթափանցիկությունը վերագրել տարբեր թափանցիկության պարամետրերը միջոցով rgba ժառանգութեան, երբ, օգտագործելով անթափանցիկություն ակնհայտ է դառնում, ոչ միայն ֆոն, այլեւ բոլոր տարրերը ներսում միավորի:

Միշտ վերահսկել ձեր օգտագործման վիճակագրությունը ԱՊՀ բրաուզերների եւ բոլոր այլ երկրներում: Ամենամեծ խնդիրը բոլոր DTP - հին տարբերակները IE, նրանք թույլ չեն տալիս Ձեզ օգտագործել լրիվ չափով CSS3: Ի դիրքով չեն մոռանում օգտագործել հատուկ ծառայությունները, որ ստուգեք, թե արդյոք Ձեր զննարկիչը աջակցում է ցանկացած CSS գույքը: Եթե դուք չեք կարող տեղադրել ավելի հին տարբերակները բրաուզերների, գտնել մի ծառայություն, որը ստուգել կայքի աշխատանքը բազմաթիվ բրաուզերների օնլայն.