Գույքի CSS «թափանցիկություն», - մի պարզ միջոց է դարձնել կայքը ավելի հետաքրքիր դիզայն

Այսօր, ստեղծումը կայքի դիզայնի դառնում է արվեստի ձեւ: Սա ոչ թե պարզապես մի շարք էջում տարրերի որոշակի գույնի եւ չափի, տառատեսակներ տարբեր ոճերի եւ թեմատիկ նկարների: Որպեսզի Ձեր կայքը տարբերվում մյուսներից, գրավելու այցելուների ուշադրությունը եւ ուղղել այն որոշակի տարրերի, օգտագործվում է մի մեծ շարք մեթոդներ եւ գործիքներ. Նրանց մեջ կա մի շատ սիրված գույքը CSS - թափանցիկությունը. Այս տեխնիկան բավականին նորաձեւ եւ դյութիչ, եւ, հետեւաբար, օգտագործվում է հաճախ: Թափանցիկությունը կարող է տալ տարբեր օբյեկտների էջերը կայքում, տեքստային բլոկի կամ ամբողջ պատկերված, օրինակ. Այն հասել է տարբեր ձեւերով. Եկեք քննենք նրանց ստորեւ.

Պարամետրերը հստակեցնել տարրեր թափանցիկության

Պարամետրերը է կարգավորել թափանցիկությունը տարրերի մի քանի. Նրանք օգտագործվում են `կախված կոնկրետ նպատակների, ինչպես նաեւ բրաուզերի, որը ներքո« ճշգրտված »դիզայնի վրա. Դրանք ներառում են հետեւյալ հատկությունները.

• անթափանցիկություն;
• ֆիլտրում.
• PNG նկար որպես ֆոն:

Գույքի արժեքի CSS «թափանցիկության» են փոխվել հետեւյալն է ավելի բարձր համարը, իսկ ցածր մակարդակը թափանցիկության տարր. The անթափանցիկություն, այն տատանվում է 0-ից 1, զտիչ - ից 10 100. Իսկ վերջինս օգտագործվում է Interet Explorer բրաուզերի, եւ բոլոր այլ կիրառելի անթափանցիկություն գույքի.

Թրանսփարենսի Image (փոփոխվող)

Սկսենք այն տարբերակները, որոնք կհայտնվեն թափանցիկ, երբ դուք տեղափոխել տարրը ըստ քարշ տալով մկնիկը.

Տեսնենք, թե ինչպես պետք է ճշտել թափանցիկությունը պատկերով: CSS առաջարկում է երկու տարբերակ. Որպեսզի դա անել, դուք պետք է գրանցվել այն ուղղակիորեն կոդը HTML փաստաթղթի հետեւյալն են:

1. Նշեք այն ուղին դեպի պատկերով:
2. Մենք սահմանել պարամետրերը թափանցիկության, երբ կուրսորը չէ. Որպեսզի դա անել, մենք օգտագործում հատկությունների onmouseover եւ onmouseout, որը նախատեսում արժեքը անթափանցիկություն, եւ զտիչ.

Նույն հատկանիշները կարող են նախատեսվել է css-փաստաթղթի աղբյուրի կոդը ավելացնել հղում դրան: Ստացված արդյունքները պարզվում է նույնը:

Թափանցիկությունը տեքստային եւ Էջի բլոկների

Ինչ վերաբերում է տեքստի կամ թաղամաս (թափանցիկ div), CSS առաջարկում է իր տարբերակը, որը նման է ստեղծել թափանցիկ պատկերը, դուք պետք է օգտագործել կապված CSS ֆայլի է, որը ցանկալի պարամետրեր են սահմանվել: Դուք կարող եք գնալ եւ մի պարզ ճանապարհ. Երբ դուք սահմանել ոճը Արգելափակման div style կամ տեքստը ժզ նախատեսել է հետեւյալ HTML- ծածկագրի onmouseover եւ onmouseout տարրերից. Երկու տարբերակներ աշխատել եւ հասնել ցանկալի արդյունքի:

թափանցիկությունը հաստատուն

Որոշ դեպքերում, թափանցիկությունը օբյեկտի, ձեւավորում տարր կամ տեքստը դուք ուզում եք սահմանել է շարունակական հիմունքներով: Այս իրավիճակում, որ լուծումը, նույնիսկ պարզ է, քան այն ժամանակ, երբ դուք սավառնել մկնիկը կուրսորը.

CSS տարր թափանցիկության կտրվի կողմից հետեւյալ կոդը: Ի բլոկ div ոճով նախատեսել արժեքները հետին պլան (օրինակ, # ff8800), անթափանցիկություն (օրինակ, 0.5) եւ լայնությունը (լայնությամբ) եւ լիցք (լիցք):

Համար պատկերով կոդ արժեքներն են կատարել եւ անթափանցիկություն ֆիլտր, եւ նշեք այն ուղին դեպի պատկերով:

RGBA-մեթոդը

Կան նաեւ այլ տարբերակներ, օգտագործելով այս սեփականության css: թափանցիկությունը կարող են կիրառվել բազային գույնի ցանկացած դիզայնի տարր. Այն օգտագործում է rgba մեթոդը: Առաջին երեք տառ հիմնական գույների (կարմիր, fission, կապույտ), եւ վերջին `ալֆա, որը սահմանում մակարդակը թափանցիկության. Օգտագործելով rgba-ձեւաչափը սահմանվում է թափանցիկության, մատնացույց անելով այն վերջին թվանշանը: Օրինակ, քանի որ. Ֆոնի: rgba (240,2,33,0.4035):

եզրափակում

Այսպիսով, օգտագործելով ընթացքում աշխատանքի վրա Կայքի դիզայն պարզ, բայց արդյունավետ առանձնահատկությունն css «թափանցիկության», դուք կարող եք այն դարձնել ավելի հետաքրքիր ու ավելի նկատելի է տարրեր, նվազագույն ջանքի համար. Նկարագրված մարմնավորումներ են մաքսային թափանցիկության հատկանիշները կօգնի Ձեզ հետ.