Նկարում պատկերված տեքստը png ձևաչափով:

Մեր խանութ սրահում դուք կգտնեք բոլոր տեսակի ծաղիկներ։

դիրքով` բացարձակ; #main-ից առաջ (կամ հետո) և #main-ի նույն բարձրության վրա, ապա կիրառեք ֆոնային պատկեր և անթափանցիկություն՝ 0.2; .

#main ( դիրքը՝ հարաբերական; ) #main:after ( բովանդակություն՝ ""; ցուցադրում՝ արգելափակում; դիրք՝ բացարձակ; վերևում՝ 0; ձախ՝ 0; ֆոնային պատկեր՝ url(/wp-content/uploads/2010/11 /tandem.jpg); լայնությունը՝ 100%, բարձրությունը՝ 100%, անթափանցիկությունը՝ 0.2, z-ինդեքսը՝ -1;)

Ողջույն բոլորին. Ինչպես գիտեք, ֆոնը CSS հատկություն է, որը թույլ է տալիս սահմանել ֆոնի գույնը կամ վերբեռնել պատկեր՝ որպես ֆոն: CSS3-ը նաև ներկայացրել է գծային և շառավղային գրադիենտներ ստեղծելու հնարավորությունը, սակայն սա առանձին հոդվածի թեմա է։ Նույն մեկում ես ուզում էի պատմել ձեզ, թե ինչպես սահմանել թափանցիկություն ֆոնային հատկության համար css-ում:

Սահմանեք թափանցիկություն css ֆոնի համար

Այսպիսով, այս ամենն արվում է շատ պարզ՝ շնորհիվ այնպիսի գունավոր ձայնագրման ձևաչափի, ինչպիսին rgba-ն է: Եթե ​​դուք աշխատում եք գրաֆիկական խմբագրիչների հետ, ապա հավանաբար գիտեք, որ rgb գույնի ռեժիմը վերծանվում է հետևյալ կերպ՝ կարմիրի (կարմիր), կանաչի (կանաչի) և կապույտի (կապույտ) համամասնությունը։ Այսպիսով, rgba-ն գրեթե նույնն է, ավելացվում է ևս մեկ պարամետր՝ թափանցիկություն։ Գրված է այսպես.

Ֆոնի գույնը՝ rgba (173, 57, 22, 0.5)

Նախ, մենք հստակ նշում ենք, որ գույնը դնում ենք rgba ռեժիմում: Այնուհետև մենք նշում ենք երեք հիմնական գույների հագեցվածության արժեքները 0-ից մինչև 255, որտեղ 255-ը ամենաբարձր հագեցվածությունն է: Չորրորդ պարամետրը մեր թափանցիկությունն է։ Այստեղ արժեքը գրված է 0-ից մեկ: 1-ը լիովին անթափանց տարր է, իսկ 0-ը լիովին թափանցիկ տարր է: Համապատասխանաբար, եթե այն սահմանեք 0, ապա ֆոնի գույնն ընդհանրապես չի երևա:

Այժմ դուք գիտեք, թե ինչպես սահմանել թափանցիկություն ֆոնային հատկության համար css-ում: Դա անելու համար անհրաժեշտ է օգտագործել rgba գույնի ռեժիմը: Գոյություն ունի նաև անթափանցիկության հատկություն, սակայն այն կիրառվում է ամբողջ տարրի նկատմամբ որպես ամբողջություն: Այսինքն՝ անթափանցիկություն կիրառելիս տեքստի վրա կարող է կիրառվել նաև թափանցիկություն, որն այն անընթեռնելի կդարձնի։

Թափանցիկ ֆոնի օրինակ

Կիսաթափանցիկ ֆոնի առավելությունները հեշտ է ցույց տալ օրինակով: Օրինակ, մենք ունենք էջի ընդհանուր ֆոն: Ահա թե ինչ տեսք կունենար բլոկը, եթե նրան տրվեր պինդ սև գույն.

Եվ հիմա եկեք նույն սև գույնը դնենք բլոկի վրա, բայց նշեք այն օգտագործելով rgba գույնի ձևաչափը, վերջին արժեքը նշելով, օրինակ, որպես 0.7: Կստացվի այսպես.
Այժմ բլոկի ֆոնը կիսաթափանցիկ է, և դրա միջով տեսանելի է ֆոնային պատկերը: Այս նկարը և ֆոնը միայն նկարազարդման նպատակով են: Ինչպես հասկանում եք, css ֆոնի վրա թափանցիկությունը կարող է օգտակար լինել, երբ ձեզ անհրաժեշտ է, որ ներքևված տարրի ֆոնը ցուցադրվի առանց այլ շերտերում գտնվող այլ ֆոները թաքցնելու:

Գույնը ինքնին դժվար չէ սահմանել rgba-ի միջոցով: Ինչպես արդեն նշվեց, առաջին երեք տառերը նշանակում են երեք հիմնական գույներ՝ կարմիր, կանաչ և կապույտ, ավելի ճիշտ՝ նրանց բաժինը (0-ից մինչև 255): Տարբեր արժեքներ սահմանելով՝ դուք կարող եք ստանալ միլիոնավոր տարբեր գույներ, իսկ կիսաթափանցիկությունը թույլ կտա անհրաժեշտության դեպքում կայքի համար շատ գեղեցիկ էֆեկտներ ստեղծել:

CSS-ն օգտագործում է անթափանցիկության հատկությունը՝ թափանցիկ էֆեկտ ստեղծելու համար:

IE8-ը և ավելի վաղ տարբերակները աջակցում են այլընտրանքային հատկություն՝ filter:alpha(opacity=x), որտեղ «x»-ը կարող է արժեք վերցնել 0-ից մինչև 100, որքան փոքր է արժեքը, այնքան ավելի թափանցիկ կլինի տարրը:

Բոլոր մյուս բրաուզերներն աջակցում են ստանդարտ CSS անթափանցիկության հատկությանը, որը կարող է արժեք ունենալ 0.0-ից 1.0-ի միջև, որքան փոքր է արժեքը, այնքան ավելի թափանցիկ կլինի տարրը.

Փորձիր »

Հովեր թափանցիկություն

:hover կեղծ դասը թույլ է տալիս փոխել տարրերի տեսքը, երբ մկնիկի օգնությամբ սավառնում եք դրանց վրա: Մենք կօգտագործենք այս հատկությունը՝ սավառնելիս պատկերը կորցնելու իր թափանցիկությունը.

Փորձիր »

Ֆոնային թափանցիկություն

Տարրը թափանցիկ դարձնելու երկու հնարավոր եղանակ կա՝ վերը նկարագրված անթափանցիկության հատկությունը և RGBA ֆոնի գույնը նշելը:

Հնարավոր է, որ դուք արդեն ծանոթ եք RGB գույնի ներկայացման մոդելին: RGB (Կարմիր, Կանաչ, Կապույտ - կարմիր, կանաչ, կապույտ) - գունային համակարգ, որը որոշում է երանգը՝ խառնելով կարմիրը, կանաչը և կապույտը: Օրինակ, տեքստի գույնը դեղին դնելու համար կարող եք օգտագործել հետևյալ հայտարարություններից որևէ մեկը.

Գույնը՝ rgb(255,255,0); գույնը՝ rgb (100%, 100%, 0);

RGB-ով նշված գույները կտարբերվեն նախկինում օգտագործած վեցանկյուն արժեքներից, քանի որ դրանք թույլ են տալիս օգտագործել ալֆա ալիք՝ թափանցիկության համար: Սա նշանակում է, որ ներքևում եղածը կցուցադրվի ալֆա թափանցիկությամբ տարրի ֆոնի վրա:

RGBA գունային հռչակագիրը շարահյուսությամբ նման է ստանդարտ RGB կանոններին: Այնուամենայնիվ, ի թիվս այլ բաների, մենք պետք է արժեքը հայտարարենք որպես RGBA (RGB-ի փոխարեն) և սահմանենք լրացուցիչ տասնորդական թափանցիկության արժեք 0.0 (լիովին թափանցիկ) և 1 (լիովին անթափանց) գույնի արժեքից հետո:

Գույնը՝ rgba(255,255,0,0.5); գույնը՝ rgba (100%, 100%, 0,0,5);

Անթափանցիկության հատկության և RGBA-ի միջև տարբերությունն այն է, որ անթափանցիկության հատկությունը թափանցիկություն է կիրառում ամբողջ տարրի վրա, այսինքն՝ տարրի ամբողջ բովանդակությունը դառնում է թափանցիկ: Իսկ RGBA-ն թույլ է տալիս թափանցիկություն սահմանել տարրի առանձին մասերի համար (օրինակ՝ միայն տեքստ կամ ֆոն).

Տեքստ (ֆոնային պատկեր. url(img.jpg); ) .prim1 (լայնությունը՝ 400px; լուսանցք՝ 30px 50px; ֆոնի գույնը՝ #ffffff; եզրագիծը՝ 1px ամուր սև; տառատեսակի քաշը՝ թավ; անթափանցիկություն՝ 0.5; զտիչ ալֆա (անթափանցիկություն=70); /*IE8-ի և ավելի վաղ*/ տեքստի հավասարեցում՝ կենտրոնում; ) .prim2 (լայնությունը՝ 400px; լուսանցք՝ 30px 50px; ֆոնի գույնը՝ rgba(255,255,255,0.5); եզրագիծը՝ 1px ամուր սև; տառատեսակի քաշը՝ թավ; տեքստի հավասարեցում՝ կենտրոնում; ) Փորձիր »

Նշում. RGBA արժեքները չեն ապահովվում IE8-ում և ավելի վաղ: Հին բրաուզերների համար հետադարձ գույն հայտարարելու համար, որոնք չեն աջակցում գունային արժեքները ալֆա ալիքներով, նախ նշեք այն RGBA արժեքից առաջ. ֆոն՝ rgb(255,255,0); ֆոն՝ rgba (255,255,0,0.5);