թափանցիկ css. Ինչպե՞ս շերտը կիսաթափանցիկ դարձնել: Ինչպես տարրը դարձնել թափանցիկ և հեռացնել CSS-ի թափանցիկությունը

Այս դասում մենք կանդրադառնանք դրանց cssհատկություններ - անթափանցիկությունԵվ RGBA. Սեփականություն Անթափանցիկությունպատասխանատու է միայն տարրերի թափանցիկության և ֆունկցիայի համար RGBA- գույնի և թափանցիկության համար, եթե նշեք ալֆա ալիքի թափանցիկության արժեքը:

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

Թվային արժեքը համար անթափանցիկությունսահմանվում է 0.0-ից 1.0 միջակայքում, որտեղ զրոն լրիվ թափանցիկությունն է, իսկ մեկը, ընդհակառակը, բացարձակ անթափանցիկություն է: Օրինակ, 50% թափանցիկություն տեսնելու համար պետք է արժեքը սահմանել 0,5: Պետք է նկատի ունենալ, որ անթափանցիկությունտարածվում է ծնողի բոլոր մանկական տարրերի վրա: Իսկ դա նշանակում է, որ կիսաթափանցիկ ֆոնի վրա տեքստը նույնպես կիսաթափանցիկ կլինի։ Իսկ սա արդեն շատ էական թերություն է, տեքստն այնքան էլ աչքի չի ընկնում։

Սքրինշոթը հստակ ցույց է տալիս, որ սև տեքստը կապույտ ֆոնի պես կիսաթափանցիկ է դարձել։

Դիվ (
ֆոն՝ url (images/yourimage.jpg); /* Ֆոնի պատկեր */
լայնությունը՝ 750px
բարձրությունը՝ 100px;
լուսանցք՝ ավտոմատ;
}
.Կապույտ(
ֆոն՝ #027av4; /* Հատակի գույն թափանցիկ ֆոն */
անթափանցիկություն՝ 0,3 /* Ֆոնի կիսաթափանցիկության արժեքը */
բարձրությունը՝ 70px;
}
h1 (
լիցք՝ 6px
տառատեսակ-ընտանիք՝ Arial Black;
տառատեսակի քաշը՝ ավելի համարձակ;
տառաչափը՝ 50px;
}

CSS թափանցիկություն RGBA ձևաչափով

Գրելու գույնի ձևաչափ RGBA, ավելի ժամանակակից այլընտրանք է սեփականության համար անթափանցիկություն. R (կարմիր), G (կանաչ), B (կապույտ)նշանակում է՝ կարմիր, կանաչ, կապույտ։ վերջին նամակը Ա- նշանակում է ալֆա ալիք, որը սահմանում է թափանցիկությունը: RGBAԻ տարբերություն Անթափանցիկությունչի ազդում մանկական տարրերի վրա.

Այժմ եկեք նայենք մեր օրինակին, օգտագործելով RGBA. Եկեք փոխարինենք այս տողերը ոճերում:

Նախապատմություն՝ ##027av4; /* Ֆոնի գույնը */
անթափանցիկություն՝ 0,3 /* ֆոնային կիսաթափանցիկության արժեքը */

հաջորդ տողին

Նախապատմություն՝ rgba (2, 127, 212, 0.3);

Ինչպես տեսնում եք, 0.3-ի թափանցիկության արժեքը նույնն է երկու մեթոդների համար:

RGBA օրինակի արդյունքը.

Երկրորդ սքրինշոթը շատ ավելի լավ տեսք ունի, քան առաջինը:

Խաղալով բլոկների ֆոնի կիսաթափանցիկության հետ, կարող եք հասնել կայքում հետաքրքիր էֆեկտներ. Կարևոր է, որ այս կիսաթափանցիկ բլոկները անցնեն գունագեղ օրինակի վրա, օրինակ՝ լուսանկարի: Միայն այս դեպքում էֆեկտը նկատելի կլինի։ Այս տեխնիկան դիզայնի մեջ օգտագործվել է երկար ժամանակ, նույնիսկ մինչև որևէ մեկի հայտնվելը CSS3, այն իրականացվել է զուտ գրաֆիկական ծրագրերում։

Եթե ​​հաճախորդը պահանջում է, որ դասավորությունը լավ տեսք ունենա բրաուզերի հին տարբերակներում Internet Explorer ապա ավելացրեք սեփականություն զտիչև մի մոռացեք մեկնաբանել, որպեսզի կոդի վավերականությունը չտուժի:

Եզրակացություն

Ձևաչափ RGBAաջակցել բոլոր ժամանակակից բրաուզերներին, բացառությամբ Internet Explorer. Շատ կարևոր է նաև, որ RGBAճկուն է, այն գործում է միայն կոնկրետ տվյալ տարրի վրա՝ չազդելով երեխաների վրա: Հասկանալի է, որ կոդավորողի համար ավելի հարմար է։ Իմ ընտրությունը միանշանակ ֆորմատի օգտին է RGBAստանալու համար թափանցիկություն css-ում.

Նյութի ավելի լավ համախմբման և ավելի մեծ պարզության համար առաջարկում եմ անցնել:

Էջի տարրերի թափանցիկությունը վերահսկելու համար օգտագործեք CSS անթափանցիկության հատկությունը: Ըստ ճշգրտման, այն կիրառելի է ցանկացած տեսակի հանգույցների համար և աջակցվում է բոլոր ժամանակակից բրաուզերներում: Դրանով դուք կարող եք ստեղծել հետաքրքիր դիզայն կամ կիրառել հարմարավետ ինտերակտիվ օգտագործողի փորձ:

Հնարավոր արժեքներ

Անթափանցիկության հատկության շարահյուսությունը css-ում այսպիսի տեսք ունի.

ընտրիչ ( անթափանցիկություն՝ 1; ) ընտրիչ ( անթափանցիկություն՝ 0; ) ընտրիչ ( անթափանցիկություն՝ 0,4; )

Թվային արժեքները 0-ից 1 միջակայքում ընդունվում են որպես մուտքագրում: Պարամետրը կարող է լինել մեկի կոտորակ, մինչդեռ կետը օգտագործվում է որպես CSS-ի ամբողջ թվի և կոտորակային մասի բաժանարար:

Զրոյական թափանցիկությամբ տարրը դառնում է անտեսանելի, բայց դեռ շարունակում է իր տեղը զբաղեցնել էջում և պահպանում է օգտատիրոջ հետ շփվելու ունակությունը։

Եթե ​​գույքի արժեքը զրոյական չէ, ապա փաստացի թափանցիկությունը կհաշվարկվի որպես որոշ վերին սահմանի տոկոս: Նորմալ իրավիճակում անթափանցիկությունը. 1-ը նշում է տարրի ամբողջական անթափանցիկությունը:

Մանկական հանգույցների թափանցիկություն

Այնուամենայնիվ, եթե տարրն ունի ծնող, որի թափանցիկությունը տարբերվում է մեկից, հաշվարկը փոխվում է: Հետնորդը չի կարող լինել «պակաս թափանցիկ», քան իր նախնիներից որևէ մեկը: Ծնող բլոկի անթափանցիկության CSS հատկության արժեքը դառնում է երեխայի հանգույցի թափանցիկության վերին սահմանը:

Ծնող (անթափանցիկություն՝ 0.7;) երեխա (անթափանցիկություն՝ 1;)

Այս իրավիճակում երեխայի տարրը կլինի 30% թափանցիկ, թեև անթափանցիկության արժեքը մեկ է:

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

Օրինակ 1. Թափանցիկություն. Անհրաժեշտ է, որ բլոկի հիմնական ֆոնը տեսանելի լինի թիրախային տարրի տակ։

Թիրախ (ֆոն՝ սև; անթափանցիկություն՝ 0,5; )

Թիրախային բլոկի ոչ միայն ֆոնն է դառնում կիսաթափանցիկ, այլև տեքստը:

Օրինակ 2. Դինամիկ թափանցիկության վերահսկում: Թիրախային բլոկի CSS անթափանցիկության հատկության արժեքը փոխվում է, երբ սավառնում եք դրա վրա:

Թիրախ ( անթափանցիկություն՝ 0,2; )

Դինամիկ թափանցիկություն

Վերջին օրինակըցույց է տալիս, որ թափանցիկ տարրերը շարունակում են արձագանքել էջի իրադարձություններին, ինչպիսիք են սավառնելը: Սա թույլ է տալիս օգտագործել javascript՝ CSS անթափանցիկության հատկությունը կառավարելու համար, ինչպես նաև օգտագործել անցումային և անիմացիոն մեխանիզմները՝ սահուն կերպով փոխելու ցուցադրման ռեժիմը։

Սցենարից թափանցիկություն մուտք գործելու համար դուք պետք է դիմեք որոշակի տարրի ոճի օբյեկտին:

// ստանալ ընթացիկ արժեքըթափանցիկություն var opacity = element.style.opacity; // սահմանելով նոր արժեք element.style.opacity = 0.4;

Բլոկի սահուն անհետացումը կարող է իրականացվել՝ օգտագործելով անցումային CSS հատկությունը.

Տարր (անթափանցություն՝ 0.1; անցում. անթափանցություն 1000 մս; ) տարր՝ սավառնել (անթափանցություն՝ 0.8; անցումը՝ անթափանցություն 2000 մս;)

Այժմ էլեմենտի հանգույցը կփոխի իր անթափանցիկությունը 10%-ից մինչև 80% մկնիկի վրա մեկ վայրկյանում, և երբ կուրսորը հեռանա, երկու վայրկյանում այն ​​կմթնի մինչև իր սկզբնական արժեքը:

CSS անթափանցիկության հատկությունը՝ զուգակցված անցումային մեխանիզմի հետ, թույլ է տալիս ստեղծել գեղեցիկ էֆեկտներ.

Ալֆա ալիք՝ անթափանցության փոխարեն

CSS-ում անթափանցիկության մեխանիզմի հիմնական նրբությունները.

• դրա գործողությունը տարածվում է ոչ միայն բլոկի ֆոնի վրա, այլև նրա տեքստի բովանդակության վրա, որը նախընտրելի է մնա պարզ.
• երեխայի տարրերը չեն կարող պակաս թափանցիկ լինել, քան մայր տարրերը:

Եթե ​​այս էֆեկտները բարդացնում են դասավորության դիզայների կյանքը, ապա անթափանցիկության փոխարեն դուք պետք է պարզապես օգտագործեք թափանցիկ ֆոն՝ սահմանելով դրա արժեքը RGBA կամ HSLA ձևաչափով:

CSS հատկություն անթափանցիկությունսահմանում է տարրի անթափանցիկությունը: Անթափանցիկությունն այն աստիճանն է, որով բովանդակությունը թաքնված է տարրի հետևում՝ թափանցիկության հակառակը:

Այս ինտերակտիվ օրինակի աղբյուրը պահվում է GitHub պահեստում: Եթե ​​ցանկանում եք նպաստել ինտերակտիվ օրինակների նախագծում, խնդրում ենք կլոնավորել https://github.com/mdn/interactive-examples և ուղարկել մեզ հետաձգման հարցում:

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

Անթափանցիկության օգտագործումը 1-ից տարբեր արժեքով տարրը տեղադրում է կուտակման նոր համատեքստում:

Օրինակներ

Հիմնական օրինակ

div (ֆոնի գույնը՝ դեղին; ) .թեթև ( անթափանցիկություն՝ 0,2; /* Հազիվ տեսանելի տեքստ ֆոնին */ ) .միջին ( անթափանցիկություն՝ 0,5; /* Տեքստի տեսանելիությունը ֆոնին ավելի պարզ է */ ) .ծանր (անթափանցիկություն՝ 0.9; /* Տեքստի տեսանելիությունը շատ պարզ է ֆոնի վրա */)

Տարբեր անթափանցիկություն :hover-ով

img.opacity ( անթափանցիկություն՝ 1; զտիչ՝ ալֆա (անթափանցիկություն=100); /* IE8 և ցածր */ խոշորացում՝ 1; /* «hasLayout» գործարկվում է IE 7-ում և ստորև */ ) img.opacity:hover ( անթափանցիկություն՝ 0..png" alt="MDN logo" width="128" height="146" class="opacity"> !}

Մատչելիության խնդիրներ

Եթե ​​տեքստի անթափանցիկությունը կարգավորվում է, կարևոր է ապահովել, որ տեքստի գույնի և տեքստի ֆոնի միջև կոնտրաստի հարաբերակցությունը բավականաչափ բարձր լինի, որպեսզի ցածր տեսողություն ունեցող մարդիկ կարողանան կարդալ էջի բովանդակությունը:

Գույնի հակադրության հարաբերակցությունը որոշվում է՝ համեմատելով տեքստի պայծառությունը ճշգրտված անթափանցության և ֆոնի գույնի արժեքի հետ: Վեբ բովանդակության հասանելիության ընթացիկ ուղեցույցներին (WCAG) համապատասխանելու համար տեքստի բովանդակությունը պահանջում է 4,5:1 և 3:1 հարաբերակցություն ավելի մեծ տեքստի համար, ինչպիսիք են վերնագրերը: Մեծ տեքստը սահմանվում է որպես 18,66px և կամ ավելի մեծ կամ 24px կամ ավելի բարձր:

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

Սկզբնական արժեքը	1.0
Դա վերաբերում է	բոլոր տարրերը
Ժառանգված	Ոչ
Ցուցադրել	տեսողական
Արժեքների կառավարում	նշված արժեքը՝ կտրված միջակայքում
Անիմացիայի տեսակը	interpolated են որպես իրական լողացող կետային թվեր։»>թիվ
Կանոնական կարգ	ֆորմալ քերականությամբ սահմանված եզակի երկիմաստ կարգ

Բրաուզերի աջակցություն

Այս էջի համատեղելիության աղյուսակը ստեղծվում է կառուցվածքային տվյալների հիման վրա: Եթե ​​ցանկանում եք նպաստել տվյալներին, խնդրում ենք ստուգել https://github.com/mdn/browser-compat-data և ուղարկել մեզ հետ կանչելու հարցում:

Թարմացրեք համատեղելիության տվյալները GitHub-ում

	Համակարգիչներ						Բջջային
	Chrome	եզր	Firefox	Internet Explorer	Օպերա	սաֆարի	android վեբ դիտում	Chrome Android-ի համար	Firefox Android-ի համար	Օպերա Android-ի համար	Safari iOS-ում	Samsung ինտերնետ
անթափանցիկություն	Chrome Ամբողջական աջակցություն 1	եզր Ամբողջական աջակցություն 12	Firefox Ամբողջական աջակցություն 1 Ամբողջական աջակցություն 1 Ոչ աջակցություն 1 - 3.5 նախածանցով նախածանցով Պահանջվում է վաճառողի նախածանց՝ -moz-	Ի.Է Ամբողջական աջակցություն 9	Օպերա Ամբողջական աջակցություն 9	սաֆարի Ամբողջական աջակցություն 2 Ամբողջական աջակցություն 2 Ոչ մի աջակցություն 1.1 - 2 նախածանցով նախածանցով Պահանջվում է վաճառողի նախածանց՝ -khtml-	վեբ դիտում Android Ամբողջական աջակցություն 1	Chrome Android Ամբողջական աջակցություն 18	Firefox Android Ամբողջական աջակցություն 4	OperaAndroid Ամբողջական աջակցություն 10.1	Safari iOS Ամբողջական աջակցություն 1	Samsung ինտերնետ Android Ամբողջական աջակցությունԱյո՛
Աջակցություն տոկոսային անթափանցիկության արժեքներին	Chrome Ամբողջական աջակցություն 78	Edge No support No	Firefox Ամբողջական աջակցություն 70	IE Ոչ աջակցություն No	Օպերա Ոչ աջակցություն No	Safari Ոչ աջակցություն No	վեբ դիտում Android Ամբողջական աջակցություն 78	Chrome Android Ամբողջական աջակցություն 78	Firefox Android Աջակցություն չկա	Օպերա Android Ոչ աջակցություն No	Safari iOS Աջակցություն չկա	Samsung Ինտերնետ Android Աջակցություն չկա

Լեգենդ

Ամբողջական աջակցությունԱմբողջական աջակցություն Ոչ մի աջակցությունՈչ մի աջակցություն Օգտագործելու համար պահանջվում է վաճառողի նախածանց կամ այլ անուն: Օգտագործելու համար պահանջվում է վաճառողի նախածանց կամ այլ անուն:

HTML և CSS թափանցիկ ֆոնի ստեղծում (անթափանցիկություն և RGBA էֆեկտներ)

կիսաթափանցիկ ազդեցությունտարրը հստակ տեսանելի է ֆոնային պատկերում և լայն տարածում է գտել տարբեր ձևերով օպերացիոն համակարգերքանի որ այն ունի ոճային և գեղեցիկ տեսք: Գլխավորը կիսաթափանցիկ բլոկների տակ ունենալ ոչ թե մոնոխրոմատիկ նախշ, այլ պատկեր, այս դեպքում նկատելի է դառնում թափանցիկությունը։

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

Հաշվի առեք տեքստի և ֆոնի կիսաթափանցիկությունը. ինչպես ճիշտ օգտագործել այն կայքի ձևավորման մեջ.

Այս հատկության հիմնական առանձնահատկությունն այն է, որ թափանցիկության արժեքը ազդում է ներսի բոլոր մանկական տարրերի վրա, ոչ միայն ֆոնի վրա: Սա նշանակում է, որ և՛ ֆոնը, և՛ տեքստը կդառնան կիսաթափանցիկ: Դուք կարող եք բարձրացնել թափանցիկության մակարդակը՝ փոխելով անթափանցիկության հրամանը 0.1-ից 1-ի:

HTML 5 CSS 3 IE 9

Վեբ դիզայնում մասնակի թափանցիկությունն օգտագործվում է և ձեռք բերվում RGBA գունային ձևաչափի միջոցով, որը դրված է միայն տարրի ֆոնի համար։

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

Կիսաթափանցիկ ֆոն HTML 5 CSS 3 IE 9

Ֆոնի համար անթափանցիկության արժեքը սահմանվել է 90%՝ կիսաթափանցիկ ֆոն և անթափանց տեքստ:

CSS անթափանցիկության հատկությունը պատասխանատու է html-ում տարրերի (պատկերներ, տեքստ, բլոկներ) թափանցիկության համար։

CSS շարահյուսություն

Որտեղ արժեքը կարող է իրական արժեքներ վերցնել 0.0-ից 1.0 միջակայքում: 1.0 արժեքը նշանակում է թափանցիկության բացակայություն (կանխադրված):

Օրինակ #1. թափանցիկ պատկեր html-ում

Առաջին պատկերը ներկայացվում է առանց թափանցիկության, երկրորդը՝ 0,5 թափանցիկությամբ։

Տարրերի կիսաթափանցիկություն

Պատկերը դարձնելով կիսաթափանցիկ սավառնելիս:

DemoDownload աղբյուրները

Շնորհակալություն ուշադրության համար!

Հաջորդ հոդվածը
Ինչպե՞ս ստեղծել պտտվող div: